水平线和在 html、css 中编码的正确方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14821087/
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
horizontal line and right way to code it in html, css
提问by Павел Тявин
I need to draw a horizontal line after some block, and I have three ways to do it:
我需要在某个块之后画一条水平线，我有三种方法可以做到：
1) Define a class h_lineand add css features to it, like
1）定义一个类h_line并向其添加css功能，例如
#css
.hline { width:100%; height:1px; background: #fff }
#html
<div class="block_1">Lorem</div> <div class="h_line"></div>
2) Use hrtag
2) 使用hr标签
#css
hr { width:100%; height:1px; background: #fff }
#html
<div class="block_1">Lorem</div> <hr />
3) use it like a afterpseudoclass
3）像after伪类一样使用它
#css
.hline:after { width:100%; height:1px; background: #fff; content:"" }
#html
<div class="block_1 h_line">Lorem</div>
Which way is the most practical?
哪种方式最实用？
回答by moettinger
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}<div>Hello</div>
<hr/>
<div>World</div>Here is how html5boilerplatedoes it:
这是html5boilerplate如何做到的：
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
回答by bevacqua
I'd go for semantic markup, use an <hr/>.
我会去语义标记，使用<hr/>.
Unless it's just a border what you want, then you can use a combination of padding, border and margin, to get the desired bound.
除非它只是您想要的边框，否则您可以使用填充、边框和边距的组合来获得所需的边界。
回答by bpoiss
In HTML5, the
<hr>tag defines a thematic break. In HTML 4.01, the<hr>tag represents a horizontal rule.
在 HTML5 中，
<hr>标签定义了一个主题中断。在 HTML 4.01 中，<hr>标签代表一条水平线。
http://www.w3schools.com/tags/tag_hr.asp
http://www.w3schools.com/tags/tag_hr.asp
So after definition, I would prefer <hr>
所以在定义之后，我更喜欢 <hr>
回答by serv-inc
If you really want a thematic break, by all means use the <hr>tag.
如果你真的想要一个主题休息，一定要使用<hr>标签。
If you just want a design line, you could use something like the css class
如果你只想要一条设计线，你可以使用类似 css 类的东西
.hline-bottom {
padding-bottom: 10px;
border-bottom: 2px solid #000; /* whichever color you prefer */
}
and use it like
并像使用它一样
<div class="block_1 hline-bottom">Cheese</div>
回答by Alia
I wanted a long dash like line, so I used this.
我想要一个像线一样的长破折号，所以我用了这个。
.dash{
border: 1px solid red;
width: 120px;
height: 0px;
}<div class="dash"></div>回答by Nadeem Qasmi
.line {
width: 53px;
height: 0;
border: 1px solid #C4C4C4;
margin: 3px;
display:inline-block;
}<html>
<body>
<div class="line"></div>
<div style="display:inline-block;">OR</div>
<div class="line"></div>
</body>
</html>回答by FredG
My simple solution is to style hr with css to have zero top & bottom margins, zero border, 1 pixel height and contrasting background color. This can be done by setting the style directly or by defining a class, for example, like:
我的简单解决方案是使用 css 设置 hr 样式，使其顶部和底部边距为零、边框为零、高度为 1 像素和背景色对比鲜明。这可以通过直接设置样式或定义一个类来完成，例如：
.thin_hr {
margin-top:0;
margin-bottom:0;
border:0;
height:1px;
background-color:black;
}
回答by Ram Prasad
it is depends on requirement , but many developers suggestions is to make your code as simple as possible. so, go with simple "hr" tag and CSS code for that.
这取决于需求，但许多开发人员建议使您的代码尽可能简单。所以，使用简单的“hr”标签和 CSS 代码。
回答by bruh
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}<div>Hello</div>
<hr/>
<div>World</div>