Extend the last li to the remaining ul width?

Question

I am a little puzzled by this. Here is what I have now:

------------------------------------------------------------------------------- | | | | | Item 1 | Item 2 | Last item | | | | | ------------------------------------------------------------------------------- 

There, the last li occupies only part of ul. I need it to look like this:

 ------------------------------------------------------------------------------- | | | | | Item 1 | Item 2 | Last item | | | | | ------------------------------------------------------------------------------- 

I can not use Javascript (or jQuery). I do not want to set the width of each li, since the size of the text can change, and I do not know how much li will be. I can have 5 or 3.

How to do it? Thanks.

Here is jsfiddle with some of my code. I need a light color to expand the rest of ul. JSFIDDLE

Answer 1

You can move all the elements, but the last on the left.

The last model of the element of the element will then be distributed behind these floating list elements (even if the content is missing). overflow:hidden prevent this behavior; the field model will begin when the last floating element is completed, as if the floating elements were still in the natural flow of the page.

 ul, li{ margin:0; padding:0; list-style-type:none; } ul li{ display: block; float:left; } ul li:last-child{ background-color: #ddd; float:none; overflow:hidden; } 

 <ul> <li>Item</li> <li>Item</li> <li>I will extend to the end of the page.. No matter how far. I will also not drop beneath my previous items, even if the text in here requires me to span over multiple lines.</li> </ul> 

Editing a newly added JSFiddle:

Jsfiddle

Answer 2

 ul>li:last-of-type {width:whatever} 

Thus, two li will swim to the last: to the left and have 20% on both, and the latter can have 60%;

Also do not forget to clean the flash drives with

 ul {overflow:auto;} 

and keep% perfect so that the borders do not disappear:

 ul>li {box-sizing:border-box;}