您将如何为此设计 HTML 标记答案

【问题标题】：How would you design the HTML markup for this您将如何为此设计 HTML 标记
【发布时间】：2012-01-18 12:11:29
【问题描述】：

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

------------------------------------------ 文本 ---- ------------------------------------------

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

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

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

【问题讨论】：

标签： html markup

【解决方案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

【讨论】：

【解决方案2】：

我会使用 CSS 和两个容器：

演示：http://jsfiddle.net/LRSuJ/

HTML：

<div class="something">
    <div class="content">Text</div>
</div>

CSS：

.something {
    border-bottom: dotted 1px #000;/* Border style */
    height: 10px;                  /* Adjusted height */
    margin-bottom: 10px;           /* Proper offset for next element */
    line-height: 20px;             /* Actual text height */
    text-align: center;            /* Center text */
}
.content {
    background-color: #FFF;        /* Hide previous dots */
    display: inline;               /* Inline element */
    padding: 0 10px;               /* Customisable left/right whitespace */
}

【讨论】：

【解决方案3】：

您可以使用字段集和图例：

<fieldset>
    <legend>TEXT</legend>
</fieldset>

fieldset
{
    border-top:solid 1px black;
}
fieldset legend
{
    text-align:center;
}

http://jsfiddle.net/2amBc/

【讨论】：

不错的 hack，但如果该元素实际上并未对表单字段进行分组，我会避开它。
@PaulD.Waite - 好点，我想说它比尝试与table 元素尝试类似的东西更相关。但我赞成@Karl 的回答，我认为这是最合适的。
当然，表格在语义上并不合适。使用 CSS 实现这种效果并不是一个很好的方法。

【解决方案4】：

我会这样做：

HTML

<fieldset>
    <legend>Text with dotted line</legend>
</fieldset>

CSS

fieldset {
    border: 0;
    border-top: 1px dotted gray;
}
legend {
    text-align: center;
}

jsFiddle 演示：http://jsfiddle.net/XZcRB/

【讨论】：