blocks|key|321693|text|尝试明确所有的边框属性。例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|321694|border:1px+solid+black;|code-block|syntax|javascript|321695|参见Border+shorthand+property。尽管其他部分是可选的，但一些浏览器不会将宽度或颜色设置为您所期望的默认值。在您的情况下，除非指定，否则我敢打赌它的宽度是零。|offset|length|321696|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/css/css_border.asp^0|0|0|2|P|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Try being explicit about all the border properties.  For example:</p>

<pre><code>border:1px solid black;
</code></pre>

<p>See <a href="http://www.w3schools.com/css/css_border.asp" rel="noreferrer">Border shorthand property</a>.  Although the other bits are optional some browsers don't set the width or colour to a default you'd expect.  In your case I'd bet that it's the width that's zero unless specified.</p>


blocks|key|319007|text|可以使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|319008|border-width:2px;
border-style:solid;
border-color:black;|code-block|syntax|javascript|319009|或者作为速记|319010|border:+2px+solid+black|319011|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>can use</p>

<pre><code>border-width:2px;
border-style:solid;
border-color:black;
</code></pre>

<p>or as shorthand</p>

<pre><code>border: 2px solid black
</code></pre>


blocks|key|321714|text|根据W3C：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|321715|321716|由于边框样式的初始值为“none”，因此除非设置边框样式，否则不会显示任何边框。|blockquote|321717|321718|321719|换句话说，您需要设置边框样式(例如solid)才能显示边框。border:thin仅设置宽度。此外，默认情况下，颜色将与文本颜色相同(通常看起来不太好)。|offset|length|style|CODE|321720|我建议设置所有三种样式：|321721|style="border:+thin+solid+black"|code-block|syntax|javascript|321722|entityMap^0|0|0|0|0|0|H|5|U|B|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|X|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|Y|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|G|3|-4|5|6|7|10|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|11|8|@$J|12|K|13|L|M]|$J|14|K|15|L|M]]|9|@]|A|$]]|$1|N|3|O|5|6|7|16|8|@]|9|@]|A|$]]|$1|P|3|Q|5|R|7|17|8|@]|9|@]|A|$S|T]]|$1|U|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|V|$]]

<p>As per the W3C:</p>

<blockquote>
  <p>Since the initial value of the border styles is 'none', no borders will be visible unless the border style is set.</p>
</blockquote>

<p>In other words, you need to set a border style (e.g. <code>solid</code>) for the border to show up. <code>border:thin</code> only sets the width. Also, the color will by default be the same as the text color (which normally doesn't look good).</p>

<p>I recommend setting all three styles:</p>

<pre><code>style="border: thin solid black"
</code></pre>


blocks|key|3283735|text|我想这就是你所指的..|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3283736|<div+id="divActivites"+name="divActivites"+style="border:thin">
++++<textarea+id="inActivities"+name="inActivities"+style="border:solid">
++++</textarea>+
</div>+|code-block|syntax|javascript|3283737|井。它必须写为border-width:thin|offset|length|style|CODE|3283738|您可以使用link+(click+here)查看不同类型的边框样式|3283739|您还可以通过以像素为单位写入宽度来设置边框宽度。(如border-+width+:+1px+)，最小宽度为1px。|3283740|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/css/css_border.asp^0|0|0|7|H|0|5|H|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@$I|11|J|12|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@$I|14|J|15|1|16]]|A|$]]|$1|O|3|P|5|6|7|17|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>I guess this is where you are pointing at ..</p>

<pre><code>&lt;div id="divActivites" name="divActivites" style="border:thin"&gt;
    &lt;textarea id="inActivities" name="inActivities" style="border:solid"&gt;
    &lt;/textarea&gt; 
&lt;/div&gt; 
</code></pre>

<p>Well. it must be written as <code>border-width:thin</code></p>

<p>Here you go with the <a href="http://www.w3schools.com/css/css_border.asp" rel="noreferrer">link (click here)</a> check out the different types of Border-styles</p>

<p>you can also set the border width by writing the width in terms of pixels.. (like border-width:1px), minimum width is 1px. </p>


blocks|key|320907|text|您可以使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|320908|border-style:+solid;
border-width:+thin;
border-color:+#FFFFFF;|code-block|syntax|javascript|320909|不过，您可以在认为合适的时候对其进行更改。|320910|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>You can use:</p>

<pre class="lang-css prettyprint-override"><code>border-style: solid;
border-width: thin;
border-color: #FFFFFF;
</code></pre>

<p>You can change these as you see fit, though.</p>


blocks|key|3283721|text|您需要设置更多的字段，而不仅仅是边框宽度。样式基本上是将边框放在页面上。Width控制边框的厚度，color告诉它边框的颜色。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3283722|border-style:+solid;+border-width:thin;+border-color:+#FFFFFF;|code-block|syntax|javascript|3283723|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You need to set more fields then just border-width. The style basically puts the border on the page. Width controls the thickness, and color tells it what color to make the border. </p>

<pre><code>border-style: solid; border-width:thin; border-color: #FFFFFF;
</code></pre>


blocks|key|3283809|text|在bootstrap+4中，您可以像这样使用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3283810|​|3283811|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link+href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"+rel="stylesheet"+/>
<script+src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<style>
++.border-5+{
++++border-width:+5px+!important;
++}
</style>

<textarea+class="border+border-dark+border-5">some+content</textarea>|code-block|syntax|javascript|3283812|3283813|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>In bootstrap 4, you can use <strong><a href="https://getbootstrap.com/docs/4.0/utilities/borders/#border" rel="nofollow noreferrer">border utilities</a></strong> like so. </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /&gt;
&lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"&gt;&lt;/script&gt;

&lt;style&gt;
  .border-5 {
    border-width: 5px !important;
  }
&lt;/style&gt;

&lt;textarea class="border border-dark border-5"&gt;some content&lt;/textarea&gt;</code></pre>
</div>
</div>
</p>


blocks|key|3070592|text|+.centerImge+{
++++++++display:+block;
++++++++margin-left:+auto;
++++++++margin-right:+auto;
++++++++width:+50%25;
++++++++height:50%25;
++++}
+<div>
+@foreach+(var+item+in+Model)
{
<span>+<img+src="@item.Thumbnail"++class="centerImge"+/></span>
++<h3+style="text-align:center">++@item.CategoryName</h3>
}
+</div>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3070593|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code> .centerImge {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
        height:50%;
    }
 &lt;div&gt;
 @foreach (var item in Model)
{
&lt;span&gt; &lt;img src="@item.Thumbnail"  class="centerImge" /&gt;&lt;/span&gt;
  &lt;h3 style="text-align:center"&gt;  @item.CategoryName&lt;/h3&gt;
}
 &lt;/div&gt;
</code></pre>


<p>I am trying to define a border around a div tag in HTML.  In some browsers the border does not appear.</p>

<p><strong>Here is my HTML code:</strong></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="divActivites" name="divActivites" style="border:thin"&gt;
    &lt;textarea id="inActivities" name="inActivities" style="border:solid"&gt;
    &lt;/textarea&gt; 
&lt;/div&gt; </code></pre>
</div>
</div>
</p>

<p>How do I set a border for an HTML div tag?</p>


How to set a border for an HTML div tag

我试图在HTML中定义一个围绕div标签的边框。在某些浏览器中，边框不会出现。这是我的代码：​<div id="divActivites" name="divActivites" style="border:thin">    <textarea id="inActivities" name="inActivities" style="border:solid">    </textarea> <

问如何为HTML div标记设置边框
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何为HTML div标记设置边框EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何为HTML div标记设置边框
EN