删除导航栏项之间的空白区域

Question

我的导航栏基于无序列表。

Each <li> is displayed as inline-block.

然而，我无法摆脱李的

之间的空白区域

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

我在stackoverflow / google上研究了这个项目，但尚未找到解决方案。

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

删除LI之间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类

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