如何删除两个内联按钮之间的空间？ [复制]答案

【问题标题】：How to remove the space between two inline buttons? [duplicate]如何删除两个内联按钮之间的空间？ [复制]
【发布时间】：2016-09-17 06:53:44
【问题描述】：

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

我尝试过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>

【问题讨论】：

标签： html css css-float css-position

【解决方案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 cmets  占用空格来删除空格

【讨论】：