2013-03-19 112 views
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/

我是否有另一種方法或最好的取勝呢?

UPDATE:當標題來到第二行時,那麼箭頭應該坐在旁邊。

+0

我能想到的是把箭頭定位在正確的唯一的解決辦法'背景圖片'到'h3'。它會看起來像這樣:http://jsfiddle.net/9Mst7/2/ – Sunyatasattva 2013-03-19 13:00:50

+0

@Sunyatasattva我認爲這個解決方案適用於一行標題,但當標題來到第二行時,它並沒有遵循。 – samuk 2013-03-20 14:51:26

+0

那麼,取決於你的意思是不遵循。它留在中心。我的理解並不完全是你想要的,這就是爲什麼我發佈它作爲評論而不是答案。只是給你一個你可能還沒有考慮過的方向的指針。 – Sunyatasattva 2013-03-20 14:53:28

回答

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/

+0

我認爲這個解決方案適用於一行標題,但當標題來到第二行時,它並不遵循。 – samuk 2013-03-19 13:37:07

+0

Blasted IE。我創造了另一個解決方案,但它不是很漂亮。我用span.arrow包裝了最後一個詞。現在,當它包裹箭頭跟隨最後一個字。小提琴:http://jsfiddle.net/6R6Ar/3/ – 2013-03-19 14:57:38