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

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

Answer 3

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

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

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

http://jsfiddle.net/2amBc/

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/

您将如何为此设计HTML标记

4 个答案:

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