造型全部懸停效果

我想要一個CSS懸停效果持續在特定列表項的所有部分，但它似乎有添加頁邊項目的底部和左右邊距，我似乎無法獲得擺脫。我知道這可能是一個非常基本的CSS問題，但我有一個JSFiddle在這裏：http://jsfiddle.net/y2497/造型全部懸停效果

我使用bootstrap來獲得我的基本CSS，但我不認爲這是影響它。

我的代碼是：

#navbar { 
    padding-bottom: 0px; 
    margin-bottom: 0px; 
} 

#nav_container li { 
    list-style-type: none; 
    display: inline-block; 
    margin: 0px 20px 0px 20px; 
} 

#nav_container li:hover { 
    background: #333; 
} 

#nav_container li a { 
    display: inline-block; 
    color: #00; 
    padding: 10px; 
} 

<nav id="navbar" class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
<div id="nav_container"> 
    <ul> 
     <li><a href="#top">Home</a></li> 
     <li><a href="#about">About</a></li> 
     <li><a href="#contact">Contact</a></li> 
    </ul> 
    </div> 
</nav>

來源

2014-03-07 noname

您在'li'標籤上有左右邊距。另外，使用'inline-blocks'時，請注意他們也會添加自己的空間。我從'li'中刪除了左右邊距，並添加了一個負邊距來對付'inline-block'添加的空間 - http://jsfiddle.net/TQ3Js/ –

你對你的李標籤使用inline-block的。你需要做的是應用float：left;並顯示：block; 。然後將一個clearfix應用於UL。內聯塊處理與處理文本類似的元素，幷包含行高和空格。

來源

2014-03-07 04:36:16

'內嵌塊'也很好，只是申請負利差。 –

其實你只需要float：left，因爲浮動元素被視爲塊級別。 –

爲什麼你不看我的小提琴作爲評論添加到OP的答案。兩種方法都可以工作（即浮動塊級元素或具有負邊距偏移的嵌入塊） –

造型全部懸停效果

回答

相關問題