2

h2タグのテキストの直後に三角形のアイコンを配置する方法を誰かが知っているかどうか疑問に思っていh2ましdisplay: blockた. ストレッチする必要があるボーダーボトムがあるので、結果を得るために100%使用display: inline-blockできません。空のスパンなどを追加しなくてもこれを達成できるかどうか疑問に思っています

フィドル: http://jsfiddle.net/7bCwv/

HTML:

<h2 class="definition-heading">Tools for Internet Users</h2>

CSS:

    h1, .carousel-caption, h2, h3, h4 {
    font-family:"Proxima Nova Semi Bold", Arial, Helvetica, sans-serif;
    color: #454545;
    font-size: 16px;
}
h2 {
    border-bottom: 1px solid #b7b7b7;
    padding: 10px 0;
}
.definition-heading:after {
    content:'';
    border-bottom: 5px solid transparent;
    border-left: 7px solid #e15646;
    border-top: 5px solid transparent;
    height: 0;
    width: 0;
    float: right;
    position: relative;
    top: 7px;
    margin-left: 9px;
}
4

2 に答える 2

4

生成されたコンテンツで使用する場合はinline-block、まさにあなたが求めていることを行う必要があります。この fork、CSS の変更を参照してください。

.definition-heading:after {
   display: inline-block; /* add this */
   /* float: right;
   top: 7px; remove these */
}

これにより、次のことが得られます。

インラインブロックを使用したスクリーンショット

于 2013-04-12T10:00:56.847 に答える
4

@CherryFlavourPez が最良の回答を提供してくれましvertical-align: middle;た。見出しと三角形がきれいに見えるように、三角形のアイコンのスタイルを設定することもお勧めします。

編集

上記の方法を使用せずに三角形のアイコンを表示することもできます。より簡単な方法は次のとおりです。

<h1>heading text here<span>►&lt;/span></h1>

今すぐスパンをスタイリングします。(三角形のアイコンはキャラマップからコピー)

于 2013-04-12T10:21:55.643 に答える