13

テキストを含むブロックまたはインライン ブロックがあるとします。段落やliなどのように。そのタグに「区切り」クラスがある場合は、次のように表示します。

すべてのコンテンツは中央に配置されます (text-align:center; で十分です)。ここがトリッキーな部分です: 中央に配置されたコンテンツの両側に (垂直方向に中央に配置された) 線が表示されます。

次の画像は私の考えを示しています。

私がそれをどのように見せたいかのおおよその例（これはテキストを使用していますが...

もっと HTML を導入しなければならない場合は、忘れてください。興味はありません。

私は長年の CSS ユーザーですが、これがわかりません... 他の誰かが考えましたか? 私はそれが大好きですが、できればCSS3はありません（仕事のために...互換性のために新しいものを使用できません）..

問題例:<p class="separator">CENTRE ME</p>

4

7 に答える 7

19

これは Firefox で動作します:

.separator {
    text-align: center;
    height: 0.5em;
    border-bottom: 2px solid black;
    margin-bottom: 0.5em;
}
.separator:first-line {
    background-color: white;
}

JSFiddleデモ

于 2012-09-28T23:50:40.533 に答える
1

お手数をおかけして申し訳ありませんが、HTML/CSS でこれを行うには、少なくとも 1 つのタグを追加する必要があります。

それを近似できる唯一のことは、:before および :after 疑似クラスを使用することですが、html コンテンツを挿入する方法がなく、コンテンツに応じて可変幅を持つコンテンツははるかに少なくなります。

于 2012-09-28T23:32:01.533 に答える
1

どうぞ:

<p class="separator"></p>

p.separator {
    line-height:1em;
    border-bottom:1px solid red;
}
p.separator:before {
    content:"TEXT";
    position:relative;
    left:50%;
    margin-left:-2.5em; /* half the number of chars */
    padding:0 0.3em;
    top:0.5em;
    background:white;
}

デモ</p>

于 2012-09-28T23:35:54.430 に答える
1

線に背景画像を使用し、テキストに一連の黒いテキスト シャドウを与えて 2 ～ 3 ピクセルのストロークをエミュレートし、テキストのすぐ周囲とテキスト間の背景を覆うことができます。

すなわち。CSS フォントの境界線?

http://jsfiddle.net/4mPkU/ - 例

text-shadow のサポートに基づいて、下位互換性が問題になります。(互換性に役立つ可能性がある IE フィルターがあります)。

于 2012-09-29T06:27:17.680 に答える
0

何かを動的にするには、次のようにします。

<ul>
    <li>
        <div class='lineLeft'></div>
        <div class='inlineText'></div>
        <div class=lineRight'></div>
    </li>
</ul>

基本的にここでは、'inlineText' div を中央に配置するようにスタイル設定し (div である必要はありません。今は単なるアイデアです)、その後、'lineLeft' と 'lineRight' の両方をそれに応じてフロート左/右にスタイル設定します。高さを親リスト項目タグの高さの半分に設定します。次に、css で各サイド div に下の境界線を付けます。

これは、私が頭の中で考えることができる最も動的なソリューションです。これはもう少し HTML ですが、すべてを正しくサイズ設定できると仮定すると、目標を適切に達成できます。

我々に教えてください。幸運を。

于 2012-09-28T23:25:00.903 に答える