如何调整hr标签的宽度

Question

我在设置<hr>代码的宽度方面遇到了问题。我的意思是我希望我的<hr>代码显示整个宽度的一半，如下图所示：

正如您所看到的，<hr>代码位于<h1>代码和段落之间，而且它是屏幕全宽的一半。

我搜索过，我得到的就是像这样设置<hr>标签：

<hr size="30">

但这不起作用。那么你知道如何设置<hr>标签的宽度吗？

Answer 1

幸运的是，有一个属性，您唯一需要做的就是使用以下属性。在这种情况下，我将其宽度设置为75％。希望对您有帮助

<hr width="75%">

Answer 2

你可以在css中设置hr元素的样式属性：

hr{width:50%;margin:0 auto;}

Answer 3

hr.half-width{
  width:50%;
  margin: 0 auto;
}

然后将class="half-width"添加到hr元素。

Answer 4

你也可以这样做

----------
hr{
    margin: 0rem 10rem 0rem 10rem;
}

Answer 5

尝试调整hr标记的字体大小

hr{
font-size: 1.5em;
}

Answer 6

It seems that is not the hr tag. probably it's the border bottom for the span container the text. so the width of the span will define the line width. use padding for the span to adjust the line-width.

I did a search and it seems this is the theme you are using: https://theme.co/x/

中的电子邮件地址

Answer 7

您可以执行以下操作

• 在此示例中的标题元素[<hr />]内移动<h2>
• 将padding-left:25%和padding-right:25%添加到标题元素
• 将text-align:center添加到标题元素

＆＃13;

＆＃13;

h2{
  font-size:50px;
  padding:0 25%;
  text-align:center;
}


h2 hr{ width:100%;height:10px;background:#000;}

＆＃13;

<h2>
This is a very big title
<hr />
</h2>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

＆＃13;

＆＃13;

＆＃13;

希望它有所帮助。