Html 怎样才能做到这一点呢？

嘿

我想创建一个效果，如上图所示。这些线条的宽度需要是动态的，所以它们要调整到中间的文本。我用桌子试过：

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

年月二十日

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

---

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

最简单的方法可能是将该行设置为背景图像，然后在其前面放置另一个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>

年月二十日
.排队{
背景：url（'imageWithLine.gif'）repeat-x；
文本对齐：居中；
}
.文本{
显示：内联块；
背景：白色；/*或线条图像背景的任何颜色*/
填充：0 5px；
}

---

注意：此代码可能并不完美，但经过一点调整，它或多或少应该是您想要的。

可能重复的，并且此注释对我的情况有完美的解决方案：也尝试过，但我有多个背景，我不能将其设置为颜色。无论如何谢谢你！