水平线和正确的方式编码它在html，css
水平线和正确的方式编码它在html，css
提问于 2013-02-12 05:22:02
我需要在一些块之后绘制一条水平线，我有三种方法可以做到：
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)使用hr标签
#css
hr { width:100%; height:1px; background: #fff }
#html
<div class="block_1">Lorem</div> <hr />3)像使用after伪类一样使用它
#css
.hline:after { width:100%; height:1px; background: #fff; content:"" }
#html
<div class="block_1 h_line">Lorem</div>哪种方法最实用？
回答 6
Stack Overflow用户
回答已采纳
发布于 2013-02-12 05:25:09
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}<div>Hello</div>
<hr/>
<div>World</div>
html5boilerplate是如何做到这一点的：
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}Stack Overflow用户
发布于 2013-02-12 05:24:24
我会使用语义标记，使用<hr/>。
除非它只是你想要的边框，然后你可以使用填充，边框和边距的组合，以获得所需的边界。
Stack Overflow用户
发布于 2019-01-20 22:10:40
.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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14821087
复制相关文章
相似问题
腾讯云开发者
