html - 如何在文本后面实现这一行？

Question

嘿！

我想创建如上图所示的效果。这些线条的宽度需要是动态的，因此它们会根据中间的文本进行调整。我用一张桌子试了一下：

            <table>
                <tr>
                    <td><hr /></td>
                    <td><p>The 20th of</p></td>
                    <td><hr /></td>
                </tr>
            </table>

但是这些线条并不仅仅像我预期的那样填满了空间。我怎样才能解决这个问题？有比使用表格更好的方法吗？

编辑：刚刚注意到图像中的错字。请忽略它。

Answer 1

最简单的方法可能是使该行成为背景图像，然后在其前面放置另一个 HTML 元素以包含文本：

<div class='linebehind'>
    <span class='text'>The 20th of</span>
</div>

<style>
.linebehind {
    background: url('imageWithLine.gif') repeat-x;
    text-align: center;
}
.text {
    display: inline-block;
    background: white; /* or whatever colour the background of the line image is */
    padding: 0 5px;
}
</style>

注意：这段代码可能并不完美，但它应该或多或少是您正在寻找的内容，只需稍加调整即可。