ul列中的2列li，不会填充100％的ul宽度

Question

我无法让UL的li元素填充100％的宽度（或接近）。

发生了一些奇怪的事情，因为第一列与父母的碉堡相邻，但是第二列与右父母的边界相差20 px。

.latest-posts .latest-posts-widget ul {
    border: solid 1px;
}

.latest-posts .latest-posts-widget ul li {
    display: inline-block;
    width: 49%;
    border: solid 1px;
}

受Bootstrap 3的影响

此外，我必须使用49％，因为50％不会使2列

Live page is under development in [www.hugotrinchero.com.ar][2]

Answer 1

由于您正在处理inline-block元素，因此您需要为父元素设置font-size到0，以便删除空格间隙。
 （重置儿童元素的font-size）。

现在，有三种方法可以做到：

解决方案1 ​​box-sizing: border-box;

*{margin:0;padding:0;}

.latest-posts .latest-posts-widget ul {
  border: #000 solid 1px;
  font-size:0;
}

.latest-posts .latest-posts-widget ul li {
  font-size: 16px; /* or use 1rem; for Root em */
  display: inline-block;
  vertical-align:top;
  box-sizing: border-box;  /* Will eliminate the border wrap issue */
  width: 50%;
  border: #000 solid 1px;
}

<div class="latest-posts">
  <div class="latest-posts-widget">
    <ul>
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda culpa numquam earum error provident et. A quibusdam laboriosam voluptates quae sunt ducimus amet nisi, commodi, corporis totam distinctio recusandae, porro.</li>
      <li>Beatae nulla iure enim illo assumenda doloribus quasi sit delectus molestias ut nam aut corrupti ea laborum unde consectetur rem maxime velit esse a quis sunt, asperiores veniam. Qui, sunt?</li>
      <li>Amet eius vitae ratione numquam, recusandae at sunt, quia eaque temporibus non excepturi sed perferendis perspiciatis, ducimus est, quasi harum? Laboriosam consequatur harum eius, repellat quaerat ratione natus quos commodi.</li>
      <li>Delectus cumque repellat, tempore in vitae, libero illum? Maiores itaque, facilis quas hic, aliquam modi corporis atque pariatur repellat enim! Qui dignissimos quia perferendis rerum, at quis mollitia aut quos.</li>
    </ul>
  </div>
</div>

解决方案2 calc(50% - 2px)

使用calc()和font-size:0;删除空白空白。
在50% - 2px中，2px占1px + 1px边界：

*{margin:0;padding:0;}

.latest-posts .latest-posts-widget ul {
  border: #000 solid 1px;
  font-size:0;
}

.latest-posts .latest-posts-widget ul li {
  display: inline-block;
  vertical-align:top;
  font-size: 1rem; /* Root-EM to fight parent's 0 */
  width: calc(50% - 2px);
  border: #000 solid 1px;
}

<div class="latest-posts">
  <div class="latest-posts-widget">
    <ul>
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda culpa numquam earum error provident et. A quibusdam laboriosam voluptates quae sunt ducimus amet nisi, commodi, corporis totam distinctio recusandae, porro.</li>
      <li>Beatae nulla iure enim illo assumenda doloribus quasi sit delectus molestias ut nam aut corrupti ea laborum unde consectetur rem maxime velit esse a quis sunt, asperiores veniam. Qui, sunt?</li>
      <li>Amet eius vitae ratione numquam, recusandae at sunt, quia eaque temporibus non excepturi sed perferendis perspiciatis, ducimus est, quasi harum? Laboriosam consequatur harum eius, repellat quaerat ratione natus quos commodi.</li>
      <li>Delectus cumque repellat, tempore in vitae, libero illum? Maiores itaque, facilis quas hic, aliquam modi corporis atque pariatur repellat enim! Qui dignissimos quia perferendis rerum, at quis mollitia aut quos.</li>
    </ul>
  </div>
</div>

解决方案3 box-shadow: inset

只需使用50%而不是有问题的边框使用box-shadow：

*{margin:0; padding:0;}

.latest-posts .latest-posts-widget ul {
  border:    solid 1px;
  font-size:  0;
}

.latest-posts .latest-posts-widget ul li {
  font-size:  16px;
  display:    inline-block;
  vertical-align: top;
  width:      50%;
  box-shadow: inset 0 0 0 1px #000;
}

<div class="latest-posts">
  <div class="latest-posts-widget">
    <ul>
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda culpa numquam earum error provident et. A quibusdam laboriosam voluptates quae sunt ducimus amet nisi, commodi, corporis totam distinctio recusandae, porro.</li>
      <li>Beatae nulla iure enim illo assumenda doloribus quasi sit delectus molestias ut nam aut corrupti ea laborum unde consectetur rem maxime velit esse a quis sunt, asperiores veniam. Qui, sunt?</li>
      <li>Amet eius vitae ratione numquam, recusandae at sunt, quia eaque temporibus non excepturi sed perferendis perspiciatis, ducimus est, quasi harum? Laboriosam consequatur harum eius, repellat quaerat ratione natus quos commodi.</li>
      <li>Delectus cumque repellat, tempore in vitae, libero illum? Maiores itaque, facilis quas hic, aliquam modi corporis atque pariatur repellat enim! Qui dignissimos quia perferendis rerum, at quis mollitia aut quos.</li>
    </ul>
  </div>
</div>

Answer 2

width: 49%;

这意味着总宽度的98％，因此右边有一个边距。由于您使用的是固定宽度布局，因此我建议您对li元素使用固定宽度。

在我的机器上（谷歌浏览器，Windows 8.1）我看到一列，而不是两列。那是因为像你这样的代码会导致不可预测的行为。

Answer 3

似乎问题出在white spaces和display: inline-block。

我将font-size: 0添加到容器ul并在ul > li: font-size: 12px;

中恢复

.latest-posts .latest-posts-widget ul {
    font-size: 0;
}

.latest-posts .latest-posts-widget ul li {
    display: inline-block;
    width: 50%;
    font-size: 12px;
}

现在列数为50％50％。

边框不会影响布局，因为它使用border-box