懸停沒有完全覆蓋的列表背景

我試圖做一些導航欄與未排序的列表，並有列表中的項目與他們的圖形，但只要在項目上懸停的背景顏色不包括整個區域還是有一點的插圖中的每個項目的空間..懸停沒有完全覆蓋的列表背景

2013-10-24 Yarry

與空白無關，您可能還需要考慮使用SVG圖形或圖標字體。這樣，即使在高分辨率屏幕上以及用戶碰到頁面縮放時，您的圖標也會看起來很棒。 – CherryFlavourPez

我可以使用svg文件作爲css中的內容聲明嗎？ – Yarry

是：http://css-tricks.com/using-svg/。我會着眼於使用一個圖標字體：一旦設置，非常簡單，你可以很容易地應用樣式（字體大小，文字陰影等） – CherryFlavourPez

的，你看到有在您的標記空白造成的缺口。與浮點數不同，inline-block實際上會尊重HTML中的空白。因此最簡單的解決方法是增加空的評論或只是確保每個<li>項目都有它之間沒有空格，就像這樣：一個更深入的解釋和其他替代修復

<ul id="navbar"> 
    <li><div class="refresh"></div></li><li><div class="settings"></div></li><li><div class="s_res"></div></li><li><div class="h_res"></div></li> 
</ul>

退房this CSS Tricks article。

彌敦道李的解決方案（更換inline-block與table-cell）一個選擇，但你應該知道，有一些變化的其他後果（缺乏IE7支持，如果你關心的是，也是在vertical-align等差異）。

如果您不能修改標記，那麼負邊距將會達到您的要求。但是，-4px實際上是使用中的字體，因此可能需要略有不同。它總是感覺像一個黑客。請查看this fiddle瞭解爲什麼這比替代方案更脆弱。

來源

2013-10-24 11:47:24 CherryFlavourPez

這裏是解決方案。只需將下面的CSS替換爲你的。

ul#navbar li { 
    border-right: 2px solid #FF9000; 
    display: table-cell; 
    margin: 0; 
    padding: 14px; 
}

WORKING DEMO

希望這有助於。

來源

2013-10-24 11:43:03 Nitesh

嘗試增加

margin-left:-4px;

您

ul#navbar li

來源

2013-10-24 11:43:47 Furunomoe

懸停沒有完全覆蓋的列表背景

回答

相關問題