李物品之间的小空白

Question

我有一个非常简单的导航栏索引，包含4个<li>项。我已经对它们进行了适当的设计，并回顾过去，检查以确保一切都是它应该的样子。

但是，出于某种原因，我的所有<li>项目之间都出现了一个小空格。

目前的情况如下：

这是理想的结果：

网上似乎没有任何修复（或至少我能找到的修复）。

这是我的CSS和HTML：

/* relevant css */

.index-navigation {
  display: inline-block;
  width: auto;
  height: 45px;
}
.index-navigation ul li {
  display: inline-block;
  width: 120px;
  padding-top: 13px;
  padding-bottom: 10px;
  background-color: #000;
  text-align: center;
}
.index-navigation ul li a {
  color: #FFF;
  font-size: 1.2em;
  font-family: helvetica;
  text-decoration: none;
}

<!-- relevant HTML !-->

<div class="index-navigation navigation-scroll">
  <ul>
    <li>
      <a href="#">HOME</a>
    </li>
    <li>
      <a href="#">FEATURED</a>
    </li>
    <li>
      <a href="#">FORUMS</a>
    </li>
    <li>
      <a href="#">SUPPORT</a>
    </li>
  </ul>
</div>

感谢所有帮助，

干杯

Answer 1

inline-block属性不会避免解释代码的中断行。 意味着渲染了<li>的所有折断线。这是你可以看到的空间。

一个技巧是添加这样的注释来删除空格，并保持html形式。

<div class="index-navigation navigation-scroll">
  <ul>
    <li>
      <a href="#">HOME</a>
    </li><!--
    --><li>
      <a href="#">FEATURED</a>
    </li><!--
    --><li>
      <a href="#">FORUMS</a>
    </li><!--
    --><li>
      <a href="#">SUPPORT</a>
    </li>
  </ul>
</div>

Answer 2

将float：left添加到下面的样式。

.index-navigation ul li {
    display: inline-block;
    width: 120px;
    padding-top: 13px;
    padding-bottom: 10px;
    background-color: #000;
    text-align: center;
    float: left;
}

Answer 3

移除inline-block并将inline放入li

/* relevant css */

.index-navigation {
  display: inline-block;
  width: auto;
  height: 45px;
}
.index-navigation ul li {
  display: inline;
  padding-left: 10px;
  padding-right:10px;
  width: 120px;
  padding-top: 13px;
  padding-bottom: 10px;
  background-color: #000;
  text-align: center;
  margin:none;
}

.index-navigation ul li a {
  color: #FFF;
  font-size: 1.2em;
  font-family: helvetica;
  text-decoration: none;
}

<!-- relevant HTML !-->

<div class="index-navigation navigation-scroll">
  <ul>
    <li>
      <a href="#">HOME</a>
    </li>
    <li>
      <a href="#">FEATURED</a>
    </li>
    <li>
      <a href="#">FORUMS</a>
    </li>
    <li>
      <a href="#">SUPPORT</a>
    </li>
  </ul>
</div>