如何为 HTML div 标签设置边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2020496/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set a border for an HTML div tag
提问by RKh
I am trying to define a border around a div tag in HTML. In some browsers the border does not appear.
我正在尝试在 HTML 中的 div 标签周围定义边框。在某些浏览器中，边框不会出现。
Here is my HTML code:
这是我的 HTML 代码：
<div id="divActivites" name="divActivites" style="border:thin">
<textarea id="inActivities" name="inActivities" style="border:solid">
</textarea>
</div> How do I set a border for an HTML div tag?
如何为 HTML div 标签设置边框？
回答by Paolo
Try being explicit about all the border properties. For example:
尝试明确所有边框属性。例如：
border:1px solid black;
See Border shorthand property. 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.
请参阅Border 速记属性。尽管其他位是可选的，但某些浏览器不会将宽度或颜色设置为您期望的默认值。在您的情况下，我敢打赌，除非指定，否则宽度为零。
回答by RKh
can use
可以使用
border-width:2px;
border-style:solid;
border-color:black;
or as shorthand
或作为速记
border: 2px solid black
回答by DisgruntledGoat
As per the W3C:
根据 W3C：
Since the initial value of the border styles is 'none', no borders will be visible unless the border style is set.
由于边框样式的初始值为“none”，因此除非设置了边框样式，否则边框将不可见。
In other words, you need to set a border style (e.g. solid) for the border to show up. border:thinonly sets the width. Also, the color will by default be the same as the text color (which normally doesn't look good).
换句话说，您需要设置边框样式（例如solid）才能显示边框。border:thin只设置宽度。此外，默认情况下颜色将与文本颜色相同（通常看起来不太好）。
I recommend setting all three styles:
我建议设置所有三种样式：
style="border: thin solid black"
回答by Andoni Henderer
You can use:
您可以使用：
border-style: solid;
border-width: thin;
border-color: #FFFFFF;
You can change these as you see fit, though.
不过，您可以根据需要更改这些内容。
回答by InfantPro'Aravind'
I guess this is where you are pointing at ..
我想这就是你指的地方..
<div id="divActivites" name="divActivites" style="border:thin">
<textarea id="inActivities" name="inActivities" style="border:solid">
</textarea>
</div>
Well. it must be written as border-width:thin
好。它必须写成border-width:thin
Here you go with the link (click here)check out the different types of Border-styles
在这里，您可以使用链接（单击此处）查看不同类型的边框样式
you can also set the border width by writing the width in terms of pixels.. (like border-width:1px), minimum width is 1px.
您还可以通过以像素为单位编写宽度来设置边框宽度..（如 border-width:1px），最小宽度为 1px。
回答by Jason Too Cool Webs
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.
您需要设置更多的字段然后只是边框宽度。该样式基本上将边框放在页面上。宽度控制厚度，颜色告诉它制作边框的颜色。
border-style: solid; border-width:thin; border-color: #FFFFFF;
回答by Penny Liu
In bootstrap 4, you can use border utilitieslike so.
在引导程序 4 中，您可以像这样使用边界实用程序。
<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>回答by Muhammad Armaghan
.centerImge {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
height:50%;
}
<div>
@foreach (var item in Model)
{
<span> <img src="@item.Thumbnail" class="centerImge" /></span>
<h3 style="text-align:center"> @item.CategoryName</h3>
}
</div>
回答by Mosaab Labbi
<style>
p{border: 1px solid red}
div{border: 5px solid blue}
只是不要叫我晚饭吃晚饭。
Call me Ishmael.
叫我以实玛利。
Just don't call me late for dinner.
只是不要叫我晚饭吃晚饭。
