如何删除两个内联按钮之间的空格？

Question

我想创建一个有四个内嵌按钮的导航栏。但是，当我这样做时，每个按钮之间会有一些空格。

我尝试了display: inline和display: inline-block，但两者都没有帮助。

我可以使用float: left，但我通常不喜欢使用浮点数。 还有其他办法吗？

谢谢！

• 杰西

div {
  margin: 0;
  padding: 0;
  border: 0;
}

div ul {
  margin: 0;
  padding: 0;
  border: 0;
  
  list-style: none;
}

div ul li {
  margin: 0;
  padding: 0;
  border: 0;
  
  display: inline;
  /* float: left; */
}

div ul li button {
  margin: 0;
  padding: 20px;
  border: 0;
  
  text-align: center;
}

#one {
  background-color: blue;
}

#two {
  background-color: orange;
}

#three {
  background-color: purple;
}

#four {
  background-color: yellow;
}

<div>
  <ul>
    <li>
      <button id="one">Button 1</button>
    </li>
    <li>
      <button id="two">Button 2</button>
    </li>
    <li>
      <button id="three">Button 3</button>
    </li>
    <li>
      <button id="four">Button 4</button>
    </li>
  </ul>
</div>

Answer 1

内联元素对代码中的空白区域很敏感，因此只需将其删除即可。

div {
  margin: 0;
  padding: 0;
  border: 0;
}
div ul {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}
div ul li {
  margin: 0;
  padding: 0;
  border: 0;
  display: inline;
  /* float: left; */
}
div ul li button {
  margin: 0;
  padding: 20px;
  border: 0;
  text-align: center;
}
#one {
  background-color: blue;
}
#two {
  background-color: orange;
}
#three {
  background-color: purple;
}
#four {
  background-color: yellow;
}

<div>
  <ul>
    <li>
      <button id="one">Button 1</button></li><li><button id="two">Button 2</button></li><li><button id="three">Button 3</button></li><li><button id="four">Button 4</button></li>
  </ul>
</div>

请注意，您还可以通过使用HTML评论<!-- -->

占用空白来删除空格