1

行間にテキストを入れるにはどうすればよい<HR>ですか?

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

よりも、と の間のセパレータのように機能-----するきれい<hr>なタグが必要です。buttontable

4

4 に答える 4

3

<hr/>に 2 つのタグを設定し、テキストを間に挟んで をdisplay: inline-block配置します。このフィドルのように。あなたはそれの位置を調整したいかもしれませんが。width

于 2012-11-18T05:29:38.163 に答える
0

次のようなことができます：

<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>
于 2012-11-18T05:44:31.773 に答える
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 に答える