我想知道在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>
除了对齐问题之外，这两个选项都让人感觉“糊里糊涂”，如果你之前碰巧看到过这个，并且知道一个优雅的解决方案，我将非常感激。
反应灵敏，透明背景，可变高度和样式的分割线，可变位置的文本，可调的分割线和文本之间的距离。也可以在同一个项目中多次使用不同的选择器用于多个分隔符样式。
SCSS如下。
标记(HTML):
<div class="divider" text-position="right">Divider</div>
CSS:
.divider {
display: flex;
align-items: center;
padding: 0 1rem;
}
.divider:before,
.divider:after {
content: '';
flex: 0 1 100%;
border-bottom: 5px dotted #ccc;
margin: 0 1rem;
}
.divider:before {
margin-left: 0;
}
.divider:after {
margin-right: 0;
}
.divider[text-position="right"]:after,
.divider[text-position="left"]:before {
content: none;
}
没有文本位置，它默认为居中。
演示:
.divider {
display: flex;
align-items: center;
padding: 0 1rem;
}
.divider:before,
.divider:after {
content: '';
flex: 0 1 100%;
border-bottom: 5px dotted #ccc;
margin: 0 1rem;
}
.divider:before {
margin-left: 0;
}
.divider:after {
margin-right: 0;
}
.divider[text-position="right"]:after,
.divider[text-position="left"]:before {
content: none;
}
<span class="divider" text-position="left">Divider</span>
<h2 class="divider">Divider</h2>
<div class="divider" text-position="right">Divider</div>
还有SCSS，快速修改一下:
$divider-selector : ".divider";
$divider-border-color: rgba(0,0,0,.21);
$divider-padding : 1rem;
$divider-border-width: 1px;
$divider-border-style: solid;
$divider-max-width : 100%;
#{$divider-selector} {
display: flex;
align-items: center;
padding: 0 $divider-padding;
max-width: $divider-max-width;
margin-left: auto;
margin-right: auto;
&:before,
&:after {
content: '';
flex: 0 1 100%;
border-bottom: $divider-border-width $divider-border-style $divider-border-color;
margin: 0 $divider-padding;
transform: translateY(#{$divider-border-width} / 2)
}
&:before {
margin-left: 0;
}
&:after {
margin-right: 0;
}
&[text-position="right"]:after,
&[text-position="left"]:before {
content: none;
}
}
小提琴。
这里有一个简单的解决方案，只有css，没有背景技巧…
.center-separator {
display: flex;
line-height: 1em;
color: gray;
}
.center-separator::before, .center-separator::after {
content: '';
display: inline-block;
flex-grow: 1;
margin-top: 0.5em;
background: gray;
height: 1px;
margin-right: 10px;
margin-left: 10px;
}
HTML:
<div class="center-separator">
centered text
</div>
示例小提琴:https://jsfiddle.net/0Lkj6wd3/
在不知道宽度和背景颜色的情况下解决这个问题的方法如下:
结构
<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;
}
