首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >水平线和正确的方式编码它在html,css

水平线和正确的方式编码它在html,css
EN

Stack Overflow用户
提问于 2013-02-12 05:22:02
回答 6查看 576.1K关注 0票数 134

我需要在一些块之后绘制一条水平线,我有三种方法可以做到:

1)定义一个类h_line并向其添加css特性,如

代码语言:javascript
复制
#css
.hline { width:100%; height:1px; background: #fff }

#html
<div class="block_1">Lorem</div> <div class="h_line"></div>

2)使用hr标签

代码语言:javascript
复制
#css
hr { width:100%; height:1px; background: #fff }

#html
<div class="block_1">Lorem</div> <hr />

3)像使用after伪类一样使用它

代码语言:javascript
复制
#css
.hline:after { width:100%; height:1px; background: #fff; content:"" }

#html
<div class="block_1 h_line">Lorem</div>

哪种方法最实用?

EN

回答 6

Stack Overflow用户

回答已采纳

发布于 2013-02-12 05:25:09

代码语言:javascript
复制
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
代码语言:javascript
复制
<div>Hello</div>
<hr/>
<div>World</div>

html5boilerplate是如何做到这一点的:

代码语言:javascript
复制
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
票数 159
EN

Stack Overflow用户

发布于 2013-02-12 05:24:24

我会使用语义标记,使用<hr/>

除非它只是你想要的边框,然后你可以使用填充,边框和边距的组合,以获得所需的边界。

票数 66
EN

Stack Overflow用户

发布于 2019-01-20 22:10:40

代码语言:javascript
复制
.line {
  width: 53px;
  height: 0;
  border: 1px solid #C4C4C4;
  margin: 3px;
  display:inline-block;
}
代码语言:javascript
复制
<html>
<body>
<div class="line"></div>
<div style="display:inline-block;">OR</div>
<div class="line"></div>
</body>
</html>

票数 10
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/14821087

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档