如何在HTML中创建一个部分水平线？

Question

我想在网页的主标题下面创建一条细线，居中对齐，类似于这样。我该如何实现？使用/hr会创建一条端到端的线。

- Hyperbola

---

你不需要这样做。你不能这样做。你需要使用CSS。另外，你的示例“/hr”是无效的。 - Rob

Answer 1

在您的示例中，这是通过CSS而不是hr标签完成的。因此，您可以像示例中那样使用css样式border-bottom，或者确实可以使用一个带有CSS的hr标签，例如：

<hr style="width:40%">

如果您想定位横线，您可能需要使用position-style。

您可以在w3c示例网站上轻松尝试此操作。

请注意，hr-width-attribute（而不是样式！）在html5下不再起作用。

- franc

Answer 2

你可以使用 HR 标签或带有简单 CSS 代码的 HR 标签。

HTML 的 HR 标签：

<center>Your Code Here</center>

<hr align="center" width="50%">

这里是带有简单 CSS 代码的 HR 标签：

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

<center>Your sample code here</center>
<hr>

注意：在HTML5规范中不支持的属性都与标签的外观有关。外观应该在CSS中设置，而不是在HTML本身中设置。

因此，请使用没有属性的<hr>标签，然后在CSS中设置其外观以使其呈现您想要的样式。

- CK Wolfe

---

@GCyrillus 更准确地说，它已经被弃用并自去年12月起已过时。align属性也已被弃用，可能已过时。 - Rob

<hr> 标签缺少结束符号。 - Rob

是的，抱歉使用了，但这里我只是用来显示 hr 标签的可见性。 - CK Wolfe

Answer 3

您可以调整 HR 的宽度。

<hr width="50%">

在你给出的例子中，它使用了带有底部边框的div的css属性。

#yourDiv {
    border-bottom: 1px solid gray;
}

- Hassan

---

除了 width 属性已经在 HTML5 中被废弃，从而变得过时。https://developers.whatwg.org/obsolete.html#obsolete - Rob

Answer 4

您可以重新定义并添加边距到您的分隔线

hr {
  border:none;
  border-top:1px solid;/* or bottom */
  margin:1em 15%; /* 15% or whatever fixed or % value that suits your needs*/
  }

body {text-align:center;}

<h1>Any content before</h1>
<hr/>
<p>any content after</p>

有一个固定的宽度，还涉及到边距

hr {
  border:none;
  border-top:1px solid;/* or bottom */
  margin:1em auto; 
  width:17em;
  }

body {text-align:center;}

<h1>Any content before</h1>
<hr/>
<p>any content after</p>

You can also use the border-bottom of any tag ...

h1 {
  border-bottom:1px solid;
  padding-bottom:0.5em;
  display:table; /* to fit to content's width  else margin or a fixed width works too */
  margin:1em auto; /* if not display:table use width or margin values as first snippet */
  }

body {text-align:center;}

<h1>Any content before</h1>
<p>any content after</p>

- G-Cyrillus

Answer 5

HTML：

---

CSS: . hr { width: 50% color: #222 }

CSS： .hr { 宽度：50%; 颜色：＃222; }

- izaya Fearon

Answer 6

HTML：

     <h1> Your code </h1>
     <hr> 

CSS：

       hr  {
       align-content : center;
       width : 20%;
       margin-left : auto;
       margin-right : auto;
        }  

---

样式设置应该在 CSS 中完成，而不是在 body 中。

编辑：我使用宽度来控制出现在标题或文本下方的水平线的长度。Margin-left 和 margin-right :auto 会自动将线条放置在中心位置，而通常情况下，线条会从页面的一端开始并结束在另一端。

- Zhara

---

我使用宽度来控制我的标题或文本下方出现的水平线的长度。Margin-left和margin-right：auto会自动将线条放置在中心，而通常线条会从页面的一端开始并结束在另一端。我刚刚注意到我的代码中所有的错误，非常抱歉。 - Zhara

通过单击“编辑”链接将其添加到答案正文中。 - Vlad Havriuk