1。使用CSS3 flexbox

Question

这非常简单，但我的大脑不会工作，我无法解决它。

我在这里有一个jsfiddle https://jsfiddle.net/krt9f8h1/

我有4个列表元素在一行中左移。

我在元素上有25％的宽度，可以在一行上均匀分布。

为什么这不起作用。

    <div class="block">
      <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
      </ul>
    </div>

Answer 1

那是因为：

当box-sizing设置为content-box时，会在宽度的顶部添加填充。所以当你有四个列表项时，它们的总宽度实际上是25％+ 10px（左）和10px（右）。这超过了100％，导致最后一个项目换行到下一行。
使用display: inline-block时，所有空格都会被视为。因此，每个列表元素之间的每个换行符都会添加额外的水平空格。您可以使用注释掉每个空格之间的空格，但我通常建议使用浮点数或弹性框而不是尝试使用这个稍微脏的黑客：
```
<div class="block">
  <ul>
    <li>One</li><li>Two</li><li>Three</li><li>Four</li>
  </ul>
</div>
```

解决方案：

如果宽度过大，请使用以下其中一项：
- box-sizing: border-box强制宽度包含填充（推荐）
- width: calc(25% - 20px)减去填充（但更改填充时必须更新此计算）
对于列表项的水平定位，请对列表项使用以下其中一项：
- CSS3 flexbox（推荐，因为它是最简单，最灵活的）或
- float（请记住在父级上使用overflow: hidden以防止维度崩溃）
- 带有注释掉的空格的内联块（我强烈建议不要这样做）

概念验证示例：

1。使用CSS3 flexbox

在此示例中，浮动列表项并声明overflow: hidden以阻止父项折叠。

.block{
  background: gray;  
  //padding: 10px;
}

ul{
  overflow: hidden; /* Prevent parent collapse due to floated children */
  list-style: none;
  margin: 0;
  padding: 0;
}

li{
  box-sizing: border-box;
  color: white;
  float: left;      /* Float list items */
  margin: 0;
  padding: 10px;
  width: 25%;
}

<div class="block">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
  </ul>
</div>

2。使用float

在此示例中，使用CSS3 flexbox规范。在这种情况下，我们无需担心父级崩溃。

.block{
  background: gray;  
  //padding: 10px;
}

ul{
  display: flex;  /* One-liner solution ;) */
  list-style: none;
  margin: 0;
  padding: 0;
}

li{
  box-sizing: border-box;
  color: white;
  margin: 0;
  padding: 10px;
  width: 25%;
}

<div class="block">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
  </ul>
</div>

Answer 2

你在这里工作fiddle

问题在于显示：内联块之间仍然存在一些差距。您需要使用float: left; display: block代替。您还需要为ul

添加clearfix

最后一部分是你需要为元素添加box-sizing: border-box;以确保它们的宽度包含填充

ul:after {
  clear: both;
  display: table;
  content: "";
}

Answer 3

你只需计算每个li元素的正确宽度，即25％ - 10px右边填充 - 10px左边距 - 边框，然后你将得到所需的结果。这一行将解决您的问题：宽度：calc(25% - 24px); 这是一个有效的jsfiddle

.block{
  background: gray;  
  //padding: 10px;
}

ul{
  list-style: none:
  margin: 0;
  padding: 0;
}

li{
  color: white;
  display: inline-block;
  margin: 0;
  padding: 10px;
  width: calc(25% - 24px);
}

<div class="block">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
  </ul>
</div>

CSS - 列表元素的宽度为25％

3 个答案:

1。使用CSS3 flexbox

2。使用float