Geek Answers Handbook

2 li columns inside ul, do not fill 100% of the width of ul

I can't get UL li elements to fill 100% of the width (or about).

Something strange happens because the first one is next to the parent burr, but the second column has an offset of 20 pixels from the right parent border.

enter image description here

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

It is affected by Bootstrap 3

Also I have to use 49% because 50% will not do 2 columns

 Live page is under development in [www.hugotrinchero.com.ar][2]
+5
source share
3 answers

Since you are dealing with inline-block elements, you need to set the font-size to 0 for the parent element to remove whitespace.
(Reset than font-size for children).

Now there are three ways to do this:

Solution 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) solution calc(50% - 2px)

Using calc() and font-size:0; to remove spaces
At 50% - 2px 2px takes into account the boundaries of 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 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>

Solution 3 box-shadow: inset

Just use 50% and use box-shadow instead of the problematic border:

 *{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>
+5
source 
 width: 49%;

This means that 98% of the total width, therefore, has a right border. Since you are using a fixed width layout, I suggest using a fixed width for the li element.

On my machine (Google Chrome, Windows 8.1) I see one column, not two. This is because code like yours will cause unpredictable behavior.

0
source

It seems that the problem was white spaces and display: inline-block .

I added font-size: 0 to the ul container and restored it to 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; }

Columns now make up 50% to 50%.

The border does not affect the layout, since it uses a border-box

enter image description here

0
source

More articles:


All Articles