html - ul 内的 2 列 li，不会填充 100% 的 ul 宽度

Question

我无法让 UL 的 li 元素填充 100% 的宽度(或接近)。

奇怪的事情发生了，因为第一列紧挨着父级的边界，但第二列与右父级的边界有大约 20 像素的偏移量。

.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)。

现在，三种方法:

方案一 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>