水平线和在html，css中进行编码的正确方法

122

我需要在某些块后绘制一条水平线，并且有三种方法可以做到：

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>

哪种方法最实用？

html css

— ПавелТявин
source

2

我认为这<hr>是最语义的。我的意思是，这不是什么意思吗？

— j08691 2013年

3

为什么不使用border-bottom？

— jsweazy

3

在HTML5中，HTML <hr>元素表示段落级元素之间的主题中断（例如，故事中场景的更改，或主题与节的转换）。

— Scott Simpson

138

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;
}

— 莫廷格
source

3

注意：使用margin: 1em auto，如果你希望它永远是在页面的中心。

— 雅克·马赖斯

1

@JacquesMarais，不确定它是否是必需元素，因为它是一个没有定义宽度的块元素，因此无论如何它都将跨越整个容器的宽度。

— moettinger

65

我会去语义标记，使用<hr/>。

除非只是想要的边框，否则可以结合使用padding，border和margin来获得所需的边界。

— 贝瓦夸
source

8

<hr>是有效的HTML5。它用来表示水平规则，但现在已用语义术语定义为内容之间的主题中断。除非另有说明，否则大多数浏览器仍会将其显示为水平线。来源：developer.mozilla.org/en-US/docs/Web/HTML/Element/hr

— AJMaxwell，2016年

标题说水平线，而<hr />是这样，所以我上了这个。标题可能应该已阅读样式化的水平线。

— 瑞安·贝恩

11

在HTML5中，<hr>标记定义了主题中断。在HTML 4.01中， <hr>标记表示水平线。

http://www.w3schools.com/tags/tag_hr.asp

所以在定义之后，我宁愿 <hr>

— 布瓦斯
source

10

如果您确实想要专题休息，请务必使用<hr>标签。

如果只需要设计线，则可以使用诸如CSS类之类的东西

.hline-bottom {
    padding-bottom: 10px;
    border-bottom: 2px solid #000; /* whichever color you prefer */
}

并像这样使用

<div class="block_1 hline-bottom">Cheese</div>

— 服务
source

5

我想要一条长破折号线，所以我用了它。

.dash{
        border: 1px solid red;
        width: 120px;
        height: 0px;

}

<div class="dash"></div>

展开摘要

— 阿里亚
source

5

.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>

展开摘要

— 纳迪姆·卡斯米（Nadeem Qasmi）
source

您尚未回答“哪个最实用？”这个问题。

— Brian Tompsett-汤莱恩

1

我的简单解决方案是使用css设置hr的样式，使其顶部和底部边距为零，边框为零，像素高度为1且背景色为对比色。这可以通过直接设置样式或定义类来完成，例如：

.thin_hr {
margin-top:0;
margin-bottom:0;
border:0;
height:1px;
background-color:black;
}

— 弗雷德·G
source

1

这取决于需求，但是许多开发人员的建议是使您的代码尽可能简单。因此，请使用简单的“ hr”标签和CSS代码。

— 拉姆·普拉萨德
source

0

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

<div>Hello</div>
<hr/>
<div>World</div>

展开摘要

强调文字

— 布鲁
source

请添加评论以解释您的答案。

— Barthy

0

这是一个相对简单的示例，对我有用。

hr {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

资源：https：//www.w3docs.com/snippets/css/how-to-style-a-horizontal-line.html