Question

如何在<HR>行之间显示文字？

<div id="outerDiv">
    <button id="myButton">Do This</button>
    <br>-----------or do something else-<br>
    <table id="mytable">
        <tr>
            <td>Blah:</td>
            <td><select id="foo"></select></td>
        </tr>
        <tr>
            <td>Blah:</td>
            <td><select id="foo"></select></td>
        </tr>
    </table>

而不是-----我想要一个漂亮的<hr>标记，其作用类似于button和table之间的分隔符。

Answer 1

将两个<hr/>代码设置为display: inline-block，并在其上放置一个width，其中包含文字。 Like this fiddle。虽然你是may want to adjust the positioning。

Answer 2

除了Tomás解决方案，您还可以创建一个HR类并向其添加content: attr(data-content);。然后使用以下HTML <hr class="hr-1" data-content="CONTENT HERE"/>。

这样您就可以通过HTML而不是CSS填写内容。

小提琴： https://jsfiddle.net/xqeuzrg7/

Answer 3

你可以这样做：

<div style="background: url('line-background.png') 50% 50% repeat-x;width: 100%;text-align: center;">
    Do this
</div>

当然你可以调整宽度或玩填充：0？px;

编辑：

如果你想隐藏标题下的背景，你可以这样做：

<div style="background: url('line-background.png') 50% 50% repeat-x;width: 100%;text-align: center;">
   <span style="background: white;padding: 2px;"> Do this</div>
</div>

Answer 4

我认为这不是执行此操作的最佳做法，但您可以将此css用于<hr/>标记，它将正常工作：

hr {
    padding: 0;
    border: none;
    border-top:  1px dashed #CCC;
    color: #333;
    text-align: center;    
    font-size:12px;
}
hr:after {
    content:"or do something else";
    display: inline-block;
    position: relative; 
    top: -0.7em;  
    font-size: 1.5em;
    padding: 0 0.25em;
    background: white;
}

我已更新您的示例，看看这是否是您想要的： http://jsfiddle.net/VrvvX/146/

如何在HR线之间添加文本

4 个答案: