列表项之间的差距和 DIV 中的神秘间距

Question

在这里查看我的代码笔：http://codepen.io/Chiz/pen/XKBbok

1) 如何去除红框之间的小缝隙？我已将填充和边距设置为 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>

Answer 1

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

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

Answer 2

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

在样式表中添加上述样式

Answer 3

在 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;
 }

Answer 4

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

* {
  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>

Answer 5

关于您的第一个问题，您遇到了行内元素之间的自然间距。将间隙视为段落中单词之间的空间。当您点击代码中单词之间的空格键时，浏览器会在屏幕上呈现一个空格。

有多种方法可以消除这些差距。一种方法是删除代码中 inline-block 元素之间的空格：Revised Codepen

这里有更详细的解释以及其他解决方案：https://stackoverflow.com/a/32801275/3597276

关于间距问题，容器右侧较大的空白是由于环绕。更具体地说，一个容器不知道它何时是子包装，因此它不会自动收缩包装较窄的布局。

这里有更详细的解释和例子：

• https://stackoverflow.com/a/32811002/3597276
• https://stackoverflow.com/a/37413580/3597276