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子元素).

现在,有三种方法可以做到:

解决方案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% - 2px1px + 1px边框的2px帐户中:

*{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也对元素使用固定宽度。

在我的机器（Google Chrome、Windows 8.1）上，我看到一列，而不是两列。那是因为像您这样的代码会导致不可预测的行为。