如何设计此HTML标记？

Question

我想制作一个类似于水平线的东西，中间有文字。它应该看起来像这样（下面是文本图片）：

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

这条线应该是虚线，中间的文本应该将线分为两半。

我想到了使用一个带有3个元素的表格，并在width属性中使用百分比值的方法，但也许有更好的解决方案。

希望我的意思清楚。感谢您提供的建议。

- simPod

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

- Karl Mendes

Answer 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 */
}

- Rob W

Answer 3

你可以使用fieldset和legend：

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

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

http://jsfiddle.net/2amBc/

- Curtis

---

不错的技巧，但如果该元素实际上没有分组表单字段，我会避开它。 - Paul D. Waite

@PaulD.Waite - 很好的观点，我认为这比尝试使用“table”元素实现类似效果更具相关性。但我已经赞同了@Karl的答案，我认为这是最合适的。 - Curtis

当然，表格在语义上并不合适。使用CSS实现这种效果并没有很好的方法。 - Paul D. Waite

Answer 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/

- stealthyninja