我不能让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).
(重置比子元素的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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。