CSS：响应式布局不应该像（数学上）那样表现

Question

我正在做一个三列布局，它应该表现得很敏感。

当屏幕宽度变小然后1025px时，在大屏幕上彼此排列的三列相互堆叠。

作为左列内容的无序列表将被水平排序（而不是垂直排列）。

父div的宽度现在为800px。没有边距，边界，填充。 ul作为子元素继承了这些宽度。

我给（四个）li元素宽度为25％，这导致预期的200px。在开发人员工具中可以看到。

但是4个列表项不会停留在一行。最后一项分成另一行。

目前我没有理由看到原因。 4 * 200px = 800px =＆gt; 它应与父元素匹配。

我能做到：

ul li {
    ...
    width: calc(25% - 4px);
    ...
}

......那就行了。但是不想采取这种方法......

因此：

有人可以告诉我为什么我会得到这些换行符虽然它应该匹配吗？

以下是代码：

＆＃13;

＆＃13;

$rad: 10px;

.content h2 {
  margin-top: 20px;
}

.content {
 background-color: #343434;
 color: white;
 width: 60%;
}

.wrap {
  max-width: 800px;
  margin: 50px auto;
  display: flex;
}

.left-column {
  background-color: #dedede;
  width: 10%;
}

.right-column {
  background-color: lighten(grey, 10%);
  width: 30%;
}

.column {
  padding: 0 25px;
  border-radius: $rad;
}

ul {
  list-style: none;
  padding-left: 0;
}

@media (max-width: 1024px) {
  .wrap {
    flex-direction: column;
  }
  
  .content {
    width: 100%;
    order: 3;
  }
  
  .left-column {
    width: 100%;
    order: 1;
  }
  
  .right-column {
    width: 100%;
    order: 2;
  }
  
  ul li {
    display: inline-block;
    background-color: #efefef;
    width: 25%;
    text-align: center;
    border-radius: $rad;
  }
}

＆＃13;

<div class="wrap">
  <div class="left-column column">
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
      <li>Four</li>
    </ul>
  </div>

  <div class="content column">
    <h2>Nam quam nunc blandit vel</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
    <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
    <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
  </div>

  <div class="right-column column">
    <p>RIGHT COLUMN - Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
    <p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以通过将float设置为<li>元素来解决此问题。这将告诉他们“彼此相邻”。

ul li {
  float: left;
  background-color: #efefef;
  width: 25%;
  text-align: center;
  border-radius: $rad;
}