如何制作分隔线？ [复制]

Posted 2023-03-05

【中文标题】如何制作分隔线？ [复制]

【英文标题】：how to make a divider line? [duplicate]

【发布时间】：2018-11-27 19:22:19

【问题描述】：

我试图弄清楚如何制作两条由文本分隔的分隔线。例如看图片

我可以单行，

但我不知道如何制作两个 that 或 inline 并在中间放置文本。

【问题讨论】：

display:flex 和 2 个伪元素来填充空白边并绘制线条 ;) ***.com/questions/32871330/… ... 必须有数百个重复项 ;)

【参考方案1】：

如果背景只是纯色，那么您可以创建一个容器宽度为width 100%; height: 1px 容器并将文本放在中间，并使用更大的z-index 和相同的background color 作为页面背景。

这是一个示例（使用伪元素创建线条）

body 
	background: #fafafa;
	font-size: 15px;
	font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;


.section-header 
	position: relative;
	text-align: center;


.section-header:before 
	content: '';
	z-index: 1;

	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);

	width: 100%;
	height: 1px;

	background: #dddddd;


	.section-header__title 
		position: relative;
		z-index: 2;

		background: #fafafa;
		padding: 5px 20px;

		font-weight: 700;
		font-size: 20px;
		text-transform: uppercase;

		display: inline-block;

		color: #174750;
	

<div class="section-header">
	<span class="section-header__title">Day 1</span>
</div>

【参考方案2】：

试试这个。创建一个包含两个小时和一个跨度的 div。然后给它一些样式。例如：

 <style>

 .pos_left

 color: #f00;
 width: 40%;
 

 .pos_right

 color: #f00;
 width: 40%;
 
span
 width: 10%;
 


.line
position: absolute;
top: 10%;
width: 40%;
display: flex;
flex-wrap: wrap;


 </style>

 <div class='line'>
 <hr class='pos_left'><span>Day 1</span><hr 
 class='pos_right'>
 </div>

您可以设置相应的样式和位置。

【讨论】：

成功了，谢谢！

【参考方案3】：

这样的事情应该可以正常工作。 另外，如果你想增加文本和行之间的间距，只需增加“padding: 0px 10px;”的第二个值即可。例如。 "填充：0px 25px;"

<div style="margin-top: 20px; width: 100%; height: 10px; border-bottom: 1px solid #e3e3e3; text-align: center; margin-bottom: 30px;">
  <span style="font-size: 15px; background-color: #ffffff; padding: 0px 10px;">
    SOME TEXT HERE
  </span>
</div>