0

これは、私がやろうとしていることを示す画像です。

ここに画像の説明を入力

したがって、特定のテキスト (通常は、ある種の見出しタグ) の左右にある線で、テキストの両側に一定の距離 (この場合は 65px) を延長します。

テキスト自体に対して流動的なものが必要です...全体の幅を固定できません。

4

4 に答える 4

1

このソリューションは、過去に私にとって最も効果的だったソリューションです。ここで例を参照できます。このコードは、::before および ::after 疑似クラスを使用して線を作成し、display:table をテキストに適用して、ボックスがそのコンテンツに適応するようにします (例では h2 を使用しました)。マージンを追加しました: 1em auto;
このようにすれば、余分な html を追加する必要はありません。それが役に立てば幸い。

h2{
    display:table; 
    margin: 1em auto;
}
h2:before, h2:after{
    content:"";
    display: block;
    border-top: 1px solid #ccc;
    width: 65px;
    margin-top:.5em;
}
h2:before{
    float: left;
    margin-right:3px;
}
h2:after{
    float:right;
    margin-left:3px;
}

』

于 2012-10-30T18:21:11.630 に答える
1

さまざまな方法でそれを行うことができます。1 つの方法は、ヘッダー タグまたはフォント設定の div 内にテキストを保持した後、テキストの周囲に境界線を設定することです。次のリンクの提案を参照してください。

<hr/> のような行の中央に中央揃えのテキストを追加します

于 2012-10-29T20:00:00.517 に答える
0

これを試してください:デモ

<html>
    <head>
        <style type="text/css"> 
            .striked-text {
                position: relative;
            }            
            .striked-text .text {            
                z-index: 10;
                position: relative;
                background-color: white;
                padding: 0 5px;
            }
            .striked-text .line {                
                left: -65px;
                padding: 0 65px;
                border-top: 1px solid gray;
                top: 0.7em;
                display: block;
                position: absolute;
                width: 100%;
                z-index: 1;
            }
        </style>
    </head>
    <body>
        <div style="text-align:center;">
            <span class="striked-text"><span class="text">FAQ</span><span class="line"></span></span>
        </div>
    </body>
</html>

見出しの場合、コンテナの幅を定義する必要があります

于 2012-10-29T20:03:12.037 に答える
0

あなたのhtmlコード

<fieldset class="title">
    <legend>Some text</legend>
</fieldset>

あなたのCSSコード

fieldset.title {
    border-top: 1px solid #aaa;
    border-bottom: none;
    border-left: none;
    border-right: none;
    display: block;
    text-align: center;

}
    fieldset {
       width: 50%;                
    }
fieldset.title legend {
    padding: 5px 10px;

}

jsフィドル

于 2012-10-29T19:48:28.210 に答える