html - 文本中间的线

Question

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

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

Answer 1

使用伪元素，看到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获得更好的结果..

Answer 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>