水平线和在 html、css 中编码的正确方法答案

【问题标题】：horizontal line and right way to code it in html, css水平线和在 html、css 中编码的正确方法
【发布时间】：2013-02-11 21:22:01
【问题描述】：

我需要在某个块之后画一条水平线，我有三种方法可以做到：

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

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

除非它只是你想要的边框，那么你可以使用填充、边框和边距的组合来获得所需的边界。

【讨论】：

<hr> 是有效的 HTML5。它曾经代表一个水平规则，但现在用语义术语定义为内容之间的主题中断。除非另有说明，否则大多数浏览器仍会将其显示为水平线。来源：developer.mozilla.org/en-US/docs/Web/HTML/Element/hr
标题说的是水平线，而
就是这样，所以我把它放在了上面。标题可能应该是带样式的水平线。

【解决方案3】：

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

【讨论】：

【解决方案4】：

在 HTML5 中，<hr> 标签定义了一个主题中断。在 HTML 4.01 中， <hr>标签代表一条横线。

所以定义后，我更喜欢<hr>

【讨论】：

【解决方案5】：

如果您真的想要主题休息，请务必使用<hr> 标签。

如果你只想要一条设计线，你可以使用类似 css 类的东西

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

并像使用它

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

【讨论】：

【解决方案6】：

我想要一条长划线，所以我用了这个。

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

}

&lt;div class="dash"&gt;&lt;/div&gt;

【讨论】：

【解决方案7】：

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

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

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

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

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

强调文字

【讨论】：

【解决方案10】：

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

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

【讨论】：