1

右側の矢印を常にタイトルの右に保つ必要がありますが、シナリオによっては矢印だけが下に来ることがあります。(フィドル プレビュー ハンドルを移動すると、表示される場合があります)。以下は HTML 構造であり、css が使用されます。

<div class="headline">
  <h3>
    <a href="#">Bowie comeback reaches number six<span class="arrow">&nbsp;</span></a>
  </h3>
</div>

CSS :

.headline {
    padding: 15px 12px 12px;
}
h3 {font-size:30px;}
.arrow{
    background: transparent url(http://blog.sameerast.com/wp-content/themes/elements-of-seo_1.4/images/bullet.gif) no-repeat;
    display: inline-block;
    height: 22px;
    margin-left: 5px;
    margin-top: 0;
    position: relative;
    top: 10px;
    width: 15px;
}

フィドル: http://jsfiddle.net/9Mst7/

これに勝つための別のアプローチまたは最善の方法はありますか?

更新: タイトルが 2 行目に来ると、矢印も横に配置する必要があります。

4

1 に答える 1

4

スパンを削除し、矢印アイコンをアンカーの背景画像として追加します<a>。

HTML：

<div class="headline">
  <h3>
    <a href="#" class="arrow">Bowie comeback reaches number six ddd</a>
  </h3>
</div>

css：

.headline {
    padding: 15px 12px 12px;
}
h3 {font-size:30px;}
.arrow{
    padding-right: 10px;
    background: transparent url(http://blog.sameerast.com/wp-content/themes/elements-of-seo_1.4/images/bullet.gif) right center no-repeat;
}

これがフィドルです：http：//jsfiddle.net/6R6Ar/2/

于 2013-03-19T13:00:00.647 に答える