我想知道在xhtml 1.0中有什么选项可以严格地在文本的两侧创建一行，就像这样:
Section one
----------------------- Next section -----------------------
Section two
我想过做一些像这样的奇妙的事情:
<div style="float:left; width: 44%;"><hr/></div>
<div style="float:right; width: 44%;"><hr/></div>
Next section
或者，因为上面有对齐问题(垂直和水平):
<table><tr>
<td style="width:47%"><hr/></td>
<td style="vertical-align:middle; text-align: center">Next section</td>
<td style="width:47%"><hr/></td>
</tr></table>
这也有对齐问题，我解决了这个混乱:
<table><tr>
<td style="border-bottom: 1px solid gray; width: 47%"> </td>
<td style="vertical-align:middle;text-align:center" rowspan="2">Next section</td>
<td style="border-bottom: 1px solid gray; width: 47%"> </td>
</tr><tr>
<td> </td>
<td> </td>
</tr></table>
除了对齐问题之外，这两个选项都让人感觉“糊里糊涂”，如果你之前碰巧看到过这个，并且知道一个优雅的解决方案，我将非常感激。
你可以用:before和:after来实现这一点，而不需要知道容器的宽度或背景颜色，使用它们可以使换行符具有更大的样式。例如，这可以修改为双线、虚线等。
JSFiddle
CSS和HTML用法:
.hr-sect {
显示:flex;
flex-basis: 100%;
对齐项目:中心;
颜色:rgba(0,0,0,0.35);
Margin: 8px 0px;
｝
.hr-sect:之前,
.hr-sect:{后
内容:“”;
flex-grow: 1;
背景:rgba(0,0,0,0.35);
身高:1 px;
字体大小:0 px;
行高:0 px;
Margin: 0px 8px;
｝
< div class = " hr-sect”>类别< / div >
SCSS版本:
.hr-sect {
display: flex;
flex-basis: 100%;
align-items: center;
color: rgba(0, 0, 0, 0.35);
margin: 8px 0;
&:before, &:after {
content: "";
flex-grow: 1;
background: rgba(0, 0, 0, 0.35);
height: 1px;
font-size: 0;
line-height: 0;
margin: 0 8px;
}
}
更新:这将不工作使用HTML5
相反，请查看这个问题以获得更多技术:CSS挑战，我可以在不引入更多HTML的情况下做到这一点吗?
我使用line-height:0在我的网站guerilla-alumnus.com的标题中创建效果
<div class="description">
<span>Text</span>
</div>
.description {
border-top:1px dotted #AAAAAA;
}
.description span {
background:white none repeat scroll 0 0;
line-height:0;
padding:0.1em 1.5em;
position:relative;
}
另一个好方法是http://robots.thoughtbot.com/
他使用背景图像和浮动来达到一种很酷的效果
