CSS 如何创建带有下划线的 div 标签标题？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3022129/
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 do I create a div tag heading with a underline?
提问by 001
See Wikipedia http://en.wikipedia.org/wiki/Css
参见维基百科http://en.wikipedia.org/wiki/Css
If you look at the heading, it says "Cascading Style Sheets", then it has an underline.
如果你看标题，它说“层叠样式表”，然后它有一个下划线。
How do you do that?
你是怎样做的？
.heading1 {
/* heading with underline */
}
回答by Tatu Ulmanen
Use borders:
使用边框：
.heading1 {
border-bottom: 1px solid #aaa;
}
And if you're using Firefox, get Firebug which allows you to inspect any element's CSS attributes so you don't have to guess how a certain style is implemented.
如果您使用的是 Firefox，请使用 Firebug，它允许您检查任何元素的 CSS 属性，这样您就不必猜测特定样式是如何实现的。
回答by knittl
h1 {
border-bottom: 1px solid gray;
}
回答by David
just add in the css: text-decoration: underline;
只需在css中添加： text-decoration: underline;
回答by nebkat
If the div is 100% wide the you can put a bottom border
如果 div 是 100% 宽，您可以放置一个底部边框
.heading1 {
border-bottom: 1px solid #000;
width:100%;
}
As everyone said get firebug, you can also use google chrome's integrated inspector(which is like firebug).
正如大家所说的获取萤火虫，您也可以使用谷歌浏览器的集成检查器（类似于萤火虫）。
回答by LPLP
The border is the wrong (amateur) way to do it. Better use the "hr" tag. It makes an underline a width of the parent div. Put it after the text or heading you want to be underlined. Live example:
边界是错误的（业余）方式。最好使用“hr”标签。它使下划线成为父 div 的宽度。将其放在要加下划线的文本或标题之后。现场示例：
Cascading Style Sheets
级联样式表
代码看起来像这样（当然是过度简化了）：
<html>
<head>
<title>Underline</title>
</head>
<body>
<p>Hello</p><hr>
</body>
</html>
Hope this helps!
希望这可以帮助！
