6

はい、私は初心者なので、気楽に行ってください。これを達成するにはいくつかの方法が必要だと私は知っています。基本的に、私は、コンテナ要素の全幅に実行されるテキストの後に行を含むヘッダーを作成するための一貫した方法を考え出そうとしてきました。

このようなもの：

This is my header _______________________________________________________ |<- end container
This is another header __________________________________________________ |<- end container

境界線を使用して線を作成する.lineクラスを作成しようとしていますが、コンテナの全幅を拡張する可変長の線を作成できませんでした。

これが私が試したことです：

CSS：

.line
{
    display:inline-block;
    border-bottom:2px #5B3400 solid;
    margin-left:5px;
    width:80%;
}

HTML：

    <h2>Our Mission<span class="line"></span></h2>

もちろん、これでは、テキストの幅を含めて、左の境界線からコンテナの80％の行しか得られません。同じ行にあるテキストの量に関係なく、テキストの後に始まり、境界線の幅全体に広がる行を作成するにはどうすればよいですか？

これは簡単なはずですが、まだ解決策を見つけることができていません。

ありがとう！

4

5 に答える 5

8

この方法は、テクスチャ背景（背景画像）で機能します。

<h2>背景画像の上にいる場合は、代わりにこの方法を使用してみてください。

HTML：

<h2 class="line-title"><span>This is my title</span><hr /></h2>

CSS：

.line-title {
    font-size: 20px;
    margin-bottom: 10px;
    padding-top: 1px; /* Allows for hr margin to start at top of h2 */
}

/* clearfix for floats */
.line-title:after {
    content: "";
    display: table;
    clear: both;
}

.line-title span {
    padding-right: 10px;
    float: left;
}

.line-title hr {
    border:1px solid #DDD;
    border-width: 1px 0 0 0;
    margin-top: 11px;
}

ここで実際の例を参照してください：http：//jsfiddle.net/yYBDD/1/

使い方：

  1. タグは<h2>、浮動要素のコンテナとして機能します。

  2. は<span>左に浮き<hr />、左に倒れて右のスペースを埋めます。

  3. は<hr />線として機能し、右側の残りのスペースを埋めます。

于 2013-02-20T22:38:29.923 に答える
4

この方法は、単色の背景色で機能します。

HTML:

<h2 class="line-title"><span>This is my title</span></h2>

CSS:

.line-title {
    border-bottom: 1px solid #DDD;
    font-size: 20px;
    height: 12px;
    margin-bottom: 10px;
}

.line-title span {
    background: #FFF;
    padding-right: 10px;
}

ここで実際の例を見ることができます: http://jsfiddle.net/yYBDD/

使い方。

  1. タグには、<h2>含まれるテキストの高さの半分に高さを設定するクラスがあります。

  2. これに<h2>は、親コンテナーの幅まで伸びる下の境界線があります (ブロック要素であるため)。

  3. の<span>内側には<h2>白い背景があり、テキストと境界線が重なる領域を覆います。

  4. そして最後に、<h2>> には下マージンがあり、 の高さの減少を補い<h2>ます。

于 2013-02-20T21:04:50.067 に答える
1

HTML:

<h2><span>Our Mission</span></h2>

CSS:

h2{
    border-bottom: 1px solid #000;
    height: 20px;
    overflow: visible;
    display: block;
    width: 100%;
}

h2 span{
    display: inline-block;
    background: #fff;
    height: 21px;
}

このようにして、高さが大きくなるため、下の境界線でオーバーフローします。

デモ: http://jsfiddle.net/afuzk/

于 2013-02-20T21:03:12.597 に答える
0

これが私が試したもので、うまくいきました：

HTML

<h2>Our Mission</h2>

CSS

h2:after
{
    content:       "\00a0";
    border-bottom: solid 2px black;
    position:      fixed;
    top:           0;
    width:         100%;
    margin-left:   3px;
}

テストする JS Bin: http://jsbin.com/ayuvuc/4

于 2013-02-20T21:29:48.330 に答える