html – ul列中的2列li,不会填充100%的ul宽度

发布时间:2020-08-11 整理:编程之家
编程之家收集整理的这篇文章主要介绍了html – ul列中的2列li,不会填充100%的ul宽度编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随编程之家小编过来看看吧!
我不能让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]

解决方法

由于您正在处理内联块元素,因此需要将父元素的font-size设置为0,以便删除空格间隙.
 (重置比子元素的font-size).

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

解决方案1盒大小:边框;

*{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计算(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,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,at quis mollitia aut quos.</li>
    </ul>
  </div>
</div>

总结

以上是编程之家为你收集整理的html – ul列中的2列li,不会填充100%的ul宽度全部内容,希望文章能够帮你解决html – ul列中的2列li,不会填充100%的ul宽度所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478
编程之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!