2

如何在文本中间创建一行，该行必须占据整个div的长度？像这样，括号表示 div 的开始和结束：

[Text ------------------ Text]
4

2 回答 2

6

使用伪元素，看到Working Fiddle

HTML：

<div><span>Left</span><span class="right">Right</span></div>

CSS： 

span
{
    background-color: white;
}
.right
{
    float: right;
}

div
{
    position: relative;
}
div:before
{
    content: '';
    display: block;
    width: 100%;
    border-top: 1px solid black;
    position: absolute;
    bottom: 50%;
    z-index: -1;
}

您可以申请padding: 0 15px;以span获得更好的结果..

于 2013-09-28T23:06:16.663 回答
2

这行得通吗？

div { width: 80%; }
hr { position: relative; top: 0.4em; }
span.left { float: left; padding-right: 0.5em; }
span.right { float: right; padding-left: 0.5em; }

<div>
    <span class="left">Text</span>
    <span class="right">Text</span>
    <hr/>
</div>
于 2013-09-28T23:10:46.460 回答