頂部導航列表項邊距錯誤

Question

我正在製作一個網站的頂部導航。菜單有一個保證金錯誤。

我已經爲列表項目以及display: inline-block定義了margin/padding : 0。

觀看演示：http://tinkerbin.com/495Qb956

基本上，我想從列表項刪除左/右頁邊距，並且知道爲什麼這個保證金是存在的。

Answer 1

默認情況下顯示：內嵌塊從左側取餘量。像這樣寫：

.top-right ul { 
    background:black; 
    height:43px; 
    font-size:0; 
} 
.top-right ul li { 
    display:inline-block; 
    border:1px solid red; 
     margin:0; 
     padding:0; 
     font-size:13px; 
} 

入住這http://tinkerbin.com/YWeV7osy

Answer 2

你看到這個房間是塊之間的空間。如果刪除</li>和<li>之間的所有空格，則會看到空間消失。基本上，內聯塊的行爲就像一個句子中的單詞，兩個塊之間的任何空白都將被摺疊爲1個空格字符。

一種解決方案是使用花車，使塊粘在一起：

li { float: left; } 

您可能需要clear這種浮動元素之後到來的元素。