实际输出

Question

ul {
  display: flex;
  flex-wrap: wrap;
  width: 45%;
  height: 40%;
  border: 1px solid red;
  list-style: none;
  margin: 0 auto;
}

ul li {
  flex: 1;
}

<ul>
  <li><img src="images/yellow.gif" alt="Yellow"></li>
  <li><img src="images/orange.gif" alt="Orange"></li>
  <li><img src="images/purple.gif" alt="Purple"></li>
  <li><img src="images/blue.gif" alt="Blue"> </li>
  <li><img src="images/pink.gif" alt="Pink"> </li>
  <li><img src="images/green.gif" alt="Green"> </li>
  <li><img src="images/black.gif" alt="Black"> </li>
  <li><img src="images/gray.gif" alt="Gray"> </li>
  <li><img src="images/red.gif" alt="Red"> </li>
</ul>

实际输出

根据实际输出，检查ul元素时有左边距，如下所示，

检查li元素时也有右边距，如下所示

预期输出

1）为什么存在这些边际空间？

2）如何避免这些边际空间？

Answer 1

左侧的空白是由ul上的默认填充引起的。将其删除：

ul { padding-left: 0; }

请注意，某些浏览器可能会使用margin代替padding进行此缩进。

右侧的空格是由flex-wrap属性引起的。当flex项目换行时，容器不会重新计算其宽度以收缩包装新布局。

通过水平调整窗口大小，您可以看到正确的间距来去in this demo。

以下是一些更多详细信息和可能的解决方法：

Answer 2

ul默认情况下为padding，因此请将其删除：

＆＃13;

img {
  display: block /*fix inline gap */
}
ul {
  display: flex;
  flex-wrap: wrap;
  width: 50%; /*changed */
  height: 40%;
  border: 1px solid red;
  list-style: none;
  margin: 0 auto;
  padding: 0
}
ul li {
  flex:1;
}

＆＃13;

<ul>
  <li>
    <img src="http://placehold.it/100/ff0" alt="Yellow">
  </li>
  <li>
    <img src="http://placehold.it/100/f90" alt="Orange">
  </li>
  <li>
    <img src="http://placehold.it/100/c6f" alt="Purple">
  </li>
  <li>
    <img src="http://placehold.it/100/06c" alt="Blue">
  </li>
  <li>
    <img src="http://placehold.it/100/fcf" alt="Pink">
  </li>
  <li>
    <img src="http://placehold.it/100/0f0" alt="Green">
  </li>
  <li>
    <img src="http://placehold.it/100/000" alt="Black">
  </li>
  <li>
    <img src="http://placehold.it/100/666" alt="Gray">
  </li>
  <li>
    <img src="http://placehold.it/100/f00" alt="Red">
  </li>
</ul>

＆＃13;

注意：在上面的这个片段中，您将在同一点上获得所需的输出，但正如Michael_B所指出的那样：

当flex项目换行时，容器不会重新计算其width 完美收缩包装新布局。

所以，如果我是你，我会尝试另一种方法。

Answer 3

浏览器在ul上添加了一定量的填充（Chrome向左侧添加了40px）。您可以通过将padding: 0添加到ul：https://jsfiddle.net/2ocbyhdc/

来覆盖此设置

ul{
    display: flex;
    flex-wrap: wrap;
    width: 45%;
    height: 40%;
    border: 1px solid red;
    list-style: none;
    margin: 0 auto;
    padding: 0;
}

Answer 4

在列表上设置<audio controls> <source src='<%# Eval("Id", "./Handlers/XYZ.ashx?Id={0}") %>' type='<%# Eval("FileType") %>' /> </audio>有帮助：

padding: 0;

ul {
  display: flex;
  flex-wrap: wrap;
  width:  300px;
  border: 1px solid red;
  list-style: none;
  margin: 0 auto;
  padding: 0;
}

ul li {
  display: flex;
  flex-grow: 1;
}

ul li img {
  flex-grow: 1;
}

删除列表项左侧的空格

实际输出

预期输出

4 个答案: