1

How can I have my text between an <HR> line?

For example: http://jsfiddle.net/VrvvX/

<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>​

Rather than having ----- I'd like to have a pretty <hr> tag which works like a separator between the button and the table.

4

4 回答 4

3

将两个<hr/>标签设置为display: inline-block并width在它们之间放置一个文本。喜欢这个小提琴。虽然您可能想要调整它的位置。

于 2012-11-18T05:29:38.163 回答
2

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

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

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

于 2016-11-17T18:19:51.437 回答
0

我认为这不是执行此操作的最佳做​​法，但您可以将此 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/

于 2012-11-18T06:06:07.393 回答
0

你可以做这样的事情：

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

当然你可以调整宽度或使用 padding: 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>
于 2012-11-18T05:44:31.773 回答