Đặt chiều rộng của các mục danh sách để điền vào danh sách không có thứ tự

Question

Vì vậy, tôi có một danh sách không theo thứ tự ngang với chiều rộng được đặt. Bên trong, tôi có một số mục danh sách động. Nó có thể là 2 mục, hoặc 6 - nó phụ thuộc vào nhiều yếu tố.

Tôi muốn có thể đặt chiều rộng của từng mục danh sách sao cho chúng lấp đầy toàn bộ chiều rộng của ul, cho dù có bao nhiêu mục bên trong. Vì vậy, nếu có 1 mục danh sách, chiều rộng của nó sẽ là 100%; 2, và cả hai sẽ là 50%, v.v.

Dưới đây là HTML và CSS của tôi:

ul 
{ 
    width: 300px; 
    height: 50px; 
    background-color: #000000; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

li 
{ 
    float: left; 
    height: 50px; 
    background-color: #4265CE; 
    margin: 0; 
    padding: 0; 
} 

<ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
</ul> 

Dưới đây là trong jFiddle: http://jsfiddle.net/vDVvm/3/

Có cách nào để làm điều này với CSS, hoặc tôi sẽ phải sử dụng jQuery?

Answer 1

Không có cách nào với CSS tinh khiết, tôi sợ.

Edit: Hầu hết các giải pháp thích hợp jQuery tôi có thể nghĩ ra: http://jsfiddle.net/vDVvm/8/

(function($){ 
    $.fn.autowidth = function() { 
    return this.each(function() {   
     $('li', this).css({'width' : (100/$('li', this).length) + '%'}) 
    }); 
    }; 
})(jQuery); 

$(document).ready(function(){ 
    $('.fill-me').autowidth();  
}); 

Hãy nhớ rằng, bất cứ khi nào (100% number_of_lis == 0!), Bạn sẽ được chạy vào một số vấn đề khó chịu với lỗi làm tròn.

Answer 2

Sử dụng jQuery, bạn có thể làm một cái gì đó như thế này:

var li = $('#mylist li').size(); 
var liWidth = 100/li; 

$('#mylist li').width(liWidth + '%'); 

giả HTML của bạn trông giống như:

<ul id="mylist"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
</ul> 

Answer 3

Đây là fiddle đang hoạt động: http://jsfiddle.net/vDVvm/7/

Answer 4

Giải pháp không có JavaScript.

ul 
{ 
    width: 300px; 
    height: 50px; 
    background-color: #000000; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    display: table; 
} 

li 
{ 
    height: 50px; 
    background-color: #4265CE; 
    margin: 0; 
    padding: 0; 
    display: table-cell; 
} 

http://jsfiddle.net/vDVvm/5/

Nó có thể không qua trình duyệt đủ, tuy nhiên.

Answer 5

Điều này cũng có thể chỉ với css, nhưng sẽ chỉ hoạt động trong các trình duyệt hiện đại.

ul { 
    /* ... */ 
    display: table; 
} 

li { 
    /* ... */ 
    display: table-cell; 
} 

Answer 6

Đây là một sự cải tiến về chức năng vzwick của:

(function($){ 
    $.fn.autowidth = function() { 
    return this.each(function() { 
     var w = $(this).width(); 
     var liw = w/$(this).children('li').length; 
     $(this).children('li').each(function(){ 
      var s = $(this).outerWidth(true)-$(this).width(); 
      $(this).width(liw-s); 
     }); 
    }); 
    }; 
})(jQuery);