我想知道在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>
除了对齐问题之外，这两个选项都让人感觉“糊里糊涂”，如果你之前碰巧看到过这个，并且知道一个优雅的解决方案，我将非常感激。
更新:这将不工作使用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/
他使用背景图像和浮动来达到一种很酷的效果
在不知道宽度和背景颜色的情况下解决这个问题的方法如下:
结构
<div class="strike">
<span>Kringle</span>
</div>
CSS
.strike {
display: block;
text-align: center;
overflow: hidden;
white-space: nowrap;
}
.strike > span {
position: relative;
display: inline-block;
}
.strike > span:before,
.strike > span:after {
content: "";
position: absolute;
top: 50%;
width: 9999px;
height: 1px;
background: red;
}
.strike > span:before {
right: 100%;
margin-right: 15px;
}
.strike > span:after {
left: 100%;
margin-left: 15px;
}
例如:http://jsfiddle.net/z8Hnz/
双线
要创建双线，请使用以下选项之一:
1)线间距固定
.strike > span:before,
.strike > span:after {
content: "";
position: absolute;
top: 50%;
width: 9999px;
border-top: 4px double red;
例如:http://jsfiddle.net/z8Hnz/103/
2)自定义行间间距
.strike > span:before,
.strike > span:after {
content: "";
position: absolute;
top: 50%;
width: 9999px;
height: 5px; /* space between lines */
margin-top: -2px; /* adjust vertical align */
border-top: 1px solid red;
border-bottom: 1px solid red;
}
例如:http://jsfiddle.net/z8Hnz/105/
SASS (SCSS)版本
在这个解决方案的基础上，我添加了“带颜色属性”的SCSS，如果它能帮助到某人…
//mixins.scss
@mixin bg-strike($color) {
display: block;
text-align: center;
overflow: hidden;
white-space: nowrap;
> span {
position: relative;
display: inline-block;
&:before,
&:after {
content: "";
position: absolute;
top: 50%;
width: 9999px;
height: 1px;
background: $color;
}
&:before {
right: 100%;
margin-right: 15px;
}
&:after {
left: 100%;
margin-left: 15px;
}
}
}
使用示例:
//content.scss
h2 {
@include bg-strike($col1);
color: $col1;
}
