导航菜单边距

Question

我正在学习CSS / HTML，我在创建导航时遇到了问题。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
}

li {
  display: inline-block;
  padding: 15px 20px;
  margin: 0;
  height: 35px;
}

li:hover {
  background-color: #232323;
  border-bottom: 3px solid #e24a4a;
  height: 32px;
  cursor: pointer;
}

<nav>
  <ul>
    <li>M1</li>
    <li>M2</li>
    <li>M3</li>
    <li>M4</li>
    <li>M5</li>
  </ul>
</nav>

M之间是保证金。我不想要它。我尝试删除它们，但没有。

M之间的保证金

如何删除它？

Answer 1

我认为你需要这样的东西。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
}

li {
  padding: 15px 0;

  display: inline-block;
  margin: 0;
  height: 35px;
}

li:hover {
  padding: 15px 20px;

  background-color: #232323;
  border-bottom: 3px solid #e24a4a;
  height: 32px;
  cursor: pointer;
}

<nav>
  <ul>
    <li>M1</li>
    <li>M2</li>
    <li>M3</li>
    <li>M4</li>
    <li>M5</li>
  </ul>
</nav>

Answer 2

阅读CBroe发布的链接中提供的详细信息...将为您提供解决方案。在我看来，＆＃34; flexbox＆＃34;和＃34;负边际＆＃34;解决方案是相当不错的技巧。

你走了：

＆＃13;

＆＃13;

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
}

li {
  display: inline-block;
  padding: 15px 20px;
  margin-right: -4px; /* negative margin */
  height: 35px;
}

li:hover {
  background-color: #232323;
  border-bottom: 3px solid #e24a4a;
  height: 32px;
  cursor: pointer;
}

＆＃13;

<nav>
  <ul>
    <li>M1</li>
    <li>M2</li>
    <li>M3</li>
    <li>M4</li>
    <li>M5</li>
  </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;