Html 使用 css 创建水平彩色条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9836375/
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
creating a horizontal colored strip using css
提问by Damon Julian
In my webpage I need to put a horizontal colored strip of some width just beneath a Logo text.
在我的网页中，我需要在 Logo 文本下方放置一个一定宽度的水平彩色条。
I tried to use this css:
我尝试使用这个 css：
#colorstrip{
width: 100%; height: 2px;
border-style: solid;
border-color: white;
}
with this html:
使用这个 html：
<span id="logo"> My site</span>
<div id="colorstrip"/>
But it shows a white rectangle. How do I make it a filled one? Or do I have to use an image (may be a white square) and put it as background of the div with repeat?
但它显示了一个白色矩形。我如何使它成为一个充满的？或者我是否必须使用图像（可能是白色方块）并将其作为重复的 div 的背景？
Is using a div for showing this thin bar the correct way? What do you advise?
使用 div 以正确的方式显示这个细条吗？你有什么建议？
回答by Fender
if you want to fill it, use:
如果要填充它，请使用：
#colorstrip{
width: 100%; height: 2px;
border-style: solid;
border-color: white;
background-color: white;
}
回答by Curt
Just apply the border to the bottom of the div:
只需将边框应用到 div 的底部：
#colorstrip{
height: 0px;
border-bottom:solid 2px red;
}?
Then adjust 2pxto the height that you require
然后调整2px到你需要的高度
回答by Timo Willemsen
Are you aware of the HTML <hr>tag? You can style this and it's probably more semantic.
你知道 HTML<hr>标签吗？你可以设置它的样式，它可能更具语义。
<style type="text/css">
hr {
color:#FFFFFF;
border:none;
height:2px;
}
</style>
回答by rzShrestha
have you tried using background-color:#fffon your css?
你试过background-color:#fff在你的 css 上使用吗？
