如何正確定位此小部件的箭頭？

小部件標題的html代碼如下所示。如何正確定位此小部件的箭頭？

<div class="widget-header"> 
         <span>caption</span> 
                <a href="sh/index.php?type=rec">more</a> 
         <img src="/img/widgets/widgets_more.gif" /> 

    </div>

我的CSS代碼是

.widget-header span { float: left; } 
.widget-header a, img { float: right; }

如果這樣，widgets_more右箭頭會定位到文本的左側「更多」這樣， enter image description here

我怎樣才能得到正確的訂購與修改的CSS代碼？

謝謝。

來源

2011-02-23 Jichao

除了將鏈接旁邊的箭頭作爲圖像放置之外，您應該將其設置爲類中的背景圖像。

像這樣的東西應該這樣做（未經測試，但應工作）：

CSS：

a.widgets-more{ 
    background-image:url(/img/widgets/widgets_more.gif); 
    background-position:right; 
    background-repeat:no-repeat; 
    padding-right:10px; 
}

如果您希望鏈接出現在鏈接的左側，然後使用以下：

a.widgets-more{ 
    background-image:url(/img/widgets/widgets_more.gif); 
    background-position:left; 
    background-repeat:no-repeat; 
    padding-left:10px; 
}

的類，然後執行適用於您的鏈接：

<a class="widgets-more" href="sh/index.php?type=rec">more</a>

另外，浮動到右元件應浮動到左的元件上方堆疊。因此，重新安排你的HTML看起來像這樣：

<div class="widget-header"> <a class="widgets-more" href="sh/index.php?type=rec">more</a> <span>caption</span> </div>

來源

2011-02-23 06:10:36 Dan

完整和優雅的回答，有很大幫助，但你可以給「浮動到右邊的元素應該向左浮動元素上面堆放任何引用。 ' – Jichao 2011-02-23 06:47:32

@Jichao：很高興你發現答案有幫助。我無法找到一篇專門解釋爲什麼一個浮動到右邊的元素需要放置在其他元素之上/之前的文章（包括向左浮動的元素），但是，如果您是浮動項目，我偶然發現了一篇關於浮動項目的有趣文章感興趣：http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/ – Dan 2011-02-24 00:29:39

如何正確定位此小部件的箭頭？

回答

相關問題