如何在 html5 中使用分隔符？答案

【问题标题】：how to use divider in html5?如何在 html5 中使用分隔符？
【发布时间】：2022-08-09 02:08:42
【问题描述】：

谁能建议如何使用位于页面中心的分隔线？我想要的是两个分隔线：一个宽 200 像素，另一个 500 像素，上边距为 5 像素，位于页面中心。查看图片了解更多信息。

<section>
<article>
<p>texttext text </p>
<div id=\"divider\">
<div id=\"divider-short\"> </div>
<div id=\"divider-long\"> </div>
</div>
</article>
</section>

    #divider{
float:right;
margin-right:35%
direction:rtl;
}
#divider-short{
width:150px;
border:2px solid gray;
margin-top:30px;
clear:both;
}
#divider-long{
margin-top:10px;
width:300px;
border:2px solid gray;
clear:both;
}

你能画出你想要的样子吗？或者为分隔线添加一个带有工作 CSS 的代码 sn-p？
我附上了一张图片以获取更多信息，以可视化我想要实现的目标
\"部分或段落后页面中心的 2px 实心。\" - 在<section>、<paragraph> 或两者之后？请清楚你想要什么，因为这样更容易回答问题而无需猜测。
嗨大卫很抱歉我的问题不清楚。正如 Prakash 在下面建议的那样，我想要一个通用类，并在我需要分隔符时使用它。

标签： html css

【解决方案1】：

您可以创建一个通用分隔器类并将其添加到您想要分隔器的位置。

.divider{
  padding-bottom:25px;
  position:relative;
}
.divider:before,.divider:after{
  width:300px;
  height:2px;
  background-color:red;
  display:inline-block;
  content:"";
  position:absolute;
  bottom:8px;
  margin-left:auto;
  margin-right:auto;
  left:0;
  right:0;
  
}
.divider:before{
  width:200px;
  bottom:14px;
}

<section class="divider">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</section>
<section class="divider">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</section>
<section >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</section>

【讨论】：

【解决方案2】：

我会删除分隔线 HTML 并使用这个 CSS（调整颜色、间距等）：

article {
  position: relative;
  padding-bottom: 30px;
}
article:before {
  content: '';
  position: absolute;
  width: 100px;
  background: grey;
  left: 50%;
  transform: translateX(-50%);
  height: 4px;
  bottom: 20px;
}
article:after {
  content: '';
  position: absolute;
  width: 200px;
  background: grey;
  left: 50%;
  transform: translateX(-50%);
  height: 4px;
  bottom: 10px;
}

【讨论】：

谢谢伊万。我从你的回答中学到了很多

【解决方案3】：

我建议您使用专用于断路器的<hr/> 标签。例如，您可以执行以下操作来执行多个长度的两个换行符

<hr style='width:25%'/>
<hr style='width:60%'/>

这只是一个例子，你可以像其他标签一样风格化 hr

【讨论】：

谢谢杰伊。我不知道 <hr> 标签很酷。我现在知道了