列表项之间的间隙和DIV中神秘的空白间距问题

Question

请查看我的codepen链接：http://codepen.io/Chiz/pen/XKBbok 1) 如何消除红框之间的小间隙？我已将padding和margin设置为0，但仍有间隙。

2) 在紫色框中（.container），右侧的空间比左侧的空间多。我尝试使用“margin:0 auto;”来使UL在.container内居中，但没有效果。

谢谢！

* {
  box-sizing: border-box;
}

.container
{
  border:1px solid blue;
  width:65%;
  margin:0 auto;
}

ul {
  list-style-type: none;
  border:1px solid purple;
  margin:0 auto;
}

ul li {
  display: inline-block;
  border: 1px solid red;
  color: grey;
  text-align: center;
  width: 10rem;
  height: 8rem;
  margin: 0;
  padding: 0;
  position:relative;
}

ul li div
{
  border:1px solid green;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  left:0;
  right:0;
}

<div class="container">
  <ul>
    <li>
      <div>
        <i class="fa fa-spinner"></i><br />Home
      </div>
    </li>

    <li>
      <div>
        <i class="fa fa-spinner"></i><br />Plants
      </div>
    </li>

    <li>
      <div>
        <i class="fa fa-spinner"></i><br />Land
      </div>
    </li>

    <li>
      <div>
        <i class="fa fa-spinner"></i><br />Animals
      </div>
    </li>

    <li>
      <div>
        <i class="fa fa-spinner"></i><br />About
      </div>
    </li>
  </ul>
</div>

- Illo Yonex Illo

---

“如何删除inline-block元素之间的空格？”（https://dev59.com/Dm445IYBdhLWcg3wBVzz）是另一个很好的重复问题目标。 - Sebastian Simon

Answer 1

关于您的第一个问题，您遇到了内联元素之间的自然间距。可以将这些间距想象成段落中单词之间的空格。当您在代码中的单词之间按下空格键时，浏览器会在屏幕上呈现出一个空格。

有多种方法可以消除这些间距。其中一种方法是在代码中删除inline-block元素之间的空格：修订后的Codepen 以下是更详细的解释以及其他解决方案：https://dev59.com/KY_ea4cB1Zd3GeqPPYQP#32801275 关于间距问题，容器右侧较大的空白是由于换行引起的。更具体地说，容器不知道其子元素何时换行，因此它不会自动缩小适应较窄的布局。

以下是更详细的解释和示例：

• https://dev59.com/clwY5IYBdhLWcg3wRGBS#32811002
• https://dev59.com/8VoU5IYBdhLWcg3we2-6#37413580

- Michael Benjamin

Answer 2

1) inline-block 元素像文本一样显示，因此元素之间的任何空格都会创建间隙。删除 <li> 结束标签和开始标签之间的空格，即 </li><li>

2) 由于 <li> 元素是 inline-block，您需要将 margin: 0 auto; 更改为 text-align: center;

- wh1tel1te

Answer 3

尝试以下代码，您可以通过添加float:left或margin-left来减少li元素之间的间距。默认情况下，ul具有一些padding-left，您需要将其设置为0，或者您可以通过将padding分配给ul来设置其左侧和右侧间距。

* {
  box-sizing: border-box;
}

.container
{
  border:1px solid blue;
  width:65%;
  height:60px;/*Added*/
  margin:0 auto;
}

ul {
  border:1px solid purple;
  margin:0;
  padding:0 48px;/*Added*/
}

ul li {
  display:inline-block;
  border: 1px solid red;
  color: grey;
  text-align: center;
  position:relative;
  list-style-type: none;
  margin:0px -3px;/*Added*/
  padding:10%;
}

ul li div
{
  border:1px solid green;
  position:absolute;
  transform:translateY(-50%);
  left:0;
  right:0;
}

<div class="container">
  <ul>
    <li>
      <div>
        <i class="fa fa-spinner"></i><br />Home
      </div>
    </li>

    <li>
      <div>
        <i class="fa fa-spinner"></i><br />Plants
      </div>
    </li>

    <li>
      <div>
        <i class="fa fa-spinner"></i><br />Land
      </div>
    </li>

    <li>
      <div>
        <i class="fa fa-spinner"></i><br />Animals
      </div>
    </li>

    <li>
      <div>
        <i class="fa fa-spinner"></i><br />About
      </div>
    </li>
  </ul>
</div>

- frnt

Answer 4

ul {
 font-size:0;
 text-align:center;
}
ul li {
 font-size:16px;
}

在你的样式表中添加上述样式。

- Praveen

Answer 5

将以下的标记替换为 ul 和 ul li：

ul {
 list-style-type: none;
 border:1px solid purple;
 margin:0 auto;
 width:100%;
 text-align:center;
 padding:0;
  }

 ul li {
  display: inline-block;
  border: 1px solid red;
  color: grey;
  text-align: center;
  width: 10rem;
  height: 8rem;
  margin: -2px;
  padding: 0;
  position:relative;
 }

- Kumar