Kéo dài li cuối cùng sang độ rộng còn lại của một ul?

Question

Tôi đã băn khoăn về điều này một lúc rồi. Dưới đây là những gì tôi có bây giờ:

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

Có, li cuối cùng chỉ chiếm một phần của ul. Tôi cần nó trông giống như sau:

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

Tôi không thể sử dụng Javascript (hoặc Jquery). Tôi không muốn đặt chiều rộng của mỗi li, vì kích thước văn bản có thể thay đổi và tôi không biết số lượng li sẽ có. Tôi có thể có 5 hoặc 3. '

Làm cách nào để tôi thực hiện việc này? Cảm ơn.

Dưới đây là một jsfiddle với một số mã của tôi. Tôi cần màu sáng hơn để mở rộng phần còn lại của ul. JSFIDDLE

Answer 1

Bạn có thể nổi tất cả các yếu tố nhưng cuối cùng đến trái.

Mô hình hộp của phần tử cuối cùng sau đó sẽ mở rộng ra sau các mục danh sách thả nổi này (mặc dù nội dung không có). overflow:hidden sẽ ngăn chặn hành vi này; mô hình hộp sẽ bắt đầu khi mục nổi cuối cùng kết thúc, như thể các mục được thả nổi vẫn nằm trong luồng tự nhiên của trang.

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>

Một biên tập của JSFiddle mới được bổ sung của bạn:

JSFiddle

Answer 2

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

Vì vậy, hai li trước khi người cuối cùng sẽ float: left và có 20% trên cả hai và người cuối cùng có thể có 60%;

Cũng đừng quên để xóa flaots với

ul {overflow:auto;} 

và giữ% hoàn hảo như vậy biên giới không thoát khỏi:

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