Przedłuż ostatnie li do pozostałej szerokości ul?

Question

Jestem od pewnego czasu zdziwiony. Oto, co mam teraz:

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

Tam ostatni li zajmuje tylko część ul. Potrzebuję go wyglądać tak:

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

Nie mogę używać JavaScript (lub Jquery). Nie chcę ustawiać szerokości każdego li, ponieważ rozmiar tekstu może się różnić i nie wiem, ile będzie tam li. Mogę mieć 5 lub 3. "

Jak to zrobić? Dzięki.

Oto jsfiddle z niektórymi z mojego kodu. Potrzebuję jaśniejszego koloru, żeby rozwinąć resztę ul. JSFIDDLE

Answer 1

można unosić się wszystkie elementy, ale ostatni do lewo.

Model pudełkowy ostatniego elementu rozszerzy się następnie za tymi pływającymi elementami listy (nawet jeśli zawartość nie ma). overflow:hidden uniemożliwi to zachowanie; Model pudełkowy rozpocznie się, gdy ostatni element pływający się zakończy, tak jakby pływające przedmioty nadal znajdowały się w naturalnym strumieniu strony.

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>

zmienił swojego nowo dodanego JSFiddle:

JSFiddle

Answer 2

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

więc dwa Li przed ostatnia będzie unosić się: w lewo i mieć 20% na obu i ostatnia może mieć 60%;

Również nie zapomnieli wyczyścić flaots z

ul {overflow:auto;} 

i zachować% doskonały więc granice nie uciec:

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