刪除導航欄項目之間的空白區域

Question

我的導航欄基於無序列表。

Each <li> is displayed as inline-block. 

但是我不能得到之間擺脫空白的李的

nav-item li{ 
    width: 123px; 
    height: 120px; 
    display: inline-block; 
    padding: 0; 
    margin: 0; 
} 

我已經研究了計算器/谷歌這一項目，但還沒有找到一個解決辦法呢。

Plnkr這裏：

http://plnkr.co/edit/7irazgvxqkpCeurnQ0Yv 

Answer 1

變化display: inline-block;到float: left;：

nav-item li{ 
     width: 123px; 
     height: 120px; 
     float: left; 
     padding: 0; 
     margin: 0; 
} 

Answer 2

在LIS之間的HTML刪除空格和換行。

<ul> 
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li><li>Aliquam tincidunt mauris eu risus.</li><li>Vestibulum auctor dapibus neque.</li> 
</ul> 

Answer 3

添加white-space: normal;到您的導航項目類

.nav-item li{ 
    width: 123px; 
    height: 120px; 
    display: inline-block; 
    padding: 0; 
    margin: 0; 
white-space: normal; 
}