html - 您将如何为此设计 HTML 标记

Question

我想制作一条中间有文本的水平线。它应该看起来像这样(文本图像如下):

------------------------------------------ TEXT --------------------------------------------

线应该是虚线，中间的文本应该把线分成两半。

我想出了一个想法，即使用一个包含 3 个元素的表格，这些元素在宽度属性中具有百分比值，但也许有更好的解决方案。

我希望它是清楚的。感谢您的想法

Answer 1

<div id="line"><span>TEXT</span></div>

和 CSS:

#line{
    border-bottom: 1px black dotted;
    overflow:visible;
    height:9px;
    text-align:center;
    margin: 5px 0 10px 0;
}
#line span{
    background-color: white;
    text-align:center;
    padding: 0 5px;
}

See Example on JSFiddle