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

this会有效吗？

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>

在文本中间的行

2 个答案: