CSS: Đã sửa bằng menu ngang, có các tab có chiều rộng thay đổi, sử dụng ul

Question

Tôi có menu ngang. Đánh dấu trông giống như sau:

<ul class="menu"> 
    <li>Item 1</li> 
    <li>Longer Item 2</li> 
    <li>Item 3</li> 
</ul> 

Trình đơn thả xuống menu con và suckerfish sẽ đến sau.

ul cần kéo dài chiều rộng của trang (ví dụ: 100% hoặc 1000px).

lis phải khác nhau về chiều rộng dựa trên nội dung của chúng.

Vì vậy, kết quả sẽ trông như thế này:

-----------------100% of page------------ 
|--Item 1--|--Longer item 2--|--Item 3--| 

Bây giờ nó rất dễ dàng để làm điều này bằng cách sửa chữa một chiều rộng cho mỗi thẻ li, nhưng vì trình đơn sẽ được CMS thúc đẩy tôi cần phải cho phép chiều rộng của các tab thay đổi tự động. Với một bảng điều này sẽ là tầm thường, nhưng tôi không thể nghĩ ra cách để làm điều đó với ul.

Answer 1

Đây là giải pháp jquery của tôi:

var actualWidth = 1000; 
var totalLIWidth = 0; 

// Calculate total width of list items 
var lis = $('ul li'); 

lis.each(function(){ 
    totalLIWidth += $(this).width(); 
}); 

// Work out how much padding we need 
var requiredPadding = Math.round(((actualWidth-totalLIWidth)/lis.length)/2); 

// To account for rounding errors, the error is going to be forced into the first tab. 
var roundingErrorFix = (requiredPadding*lis.length*2)+totalLIWidth-actualWidth; 

// Apply padding to list items 
lis.each(function(i) { 
    if(i==0) { 
     $(this).css('padding-left',requiredPadding-roundingErrorFix+'px') 
      .css('padding-right',requiredPadding-roundingErrorFix+'px'); 
    } 
    else { 
     $(this).css('padding-left',requiredPadding+'px') 
      .css('padding-right',requiredPadding+'px'); 
    } 
}); 

Answer 2

Nếu bạn đang cố gắng tạo kiểu cho ul (như nó trải rộng trên toàn bộ trang), đặt cược tốt nhất của bạn là quấn nó vào div và tạo kiểu div, sau đó cho phép ul chỉ kéo dài nội dung của nó mang nó

Answer 3

Đây là trường hợp cho

hiển thị: Bảng-Man

ul { 
    display: table; 
    width: 100%; 
    table-layout: fixed; 
} 
li { 
    display: table-cell; 
} 

Thật không may, bạn nên từ bỏ ý nghĩ về việc hỗ trợ IES 6 và 7, nhưng khác đây là con đường để đi (hoặc swit ching vào các bảng HTML, mà có thể hoặc có thể không quá xa nội dung ngữ nghĩa của đánh dấu).

Answer 4

Nếu bạn hài lòng sử dụng JavaScript, jQuery có thể giải quyết vấn đề này như sau

var $menu, totalwidth; 

$menu = $('ul.menu'); 
totalwidth = ($menu.width()/100); 

$('ul.menu li').each(function(){ 
    this.css('width',String(Math.floor(this.width()/totalwidth))+'%'); 
}); 

$menu.css('width','100%'); 

Đó là chưa được kiểm tra, nhưng có vẻ đúng với tôi. Bình luận nếu bạn có bất kỳ câu hỏi nào cả.

Answer 5

Tôi nghĩ đề xuất của boldewyn sẽ hoạt động. Tôi sẽ sử dụng cách tiếp cận này cho các trình duyệt hiện đại và sau đó sử dụng các chú thích có điều kiện để nạp thông tin sau vào ie6/7, do đó nav sẽ ổn định, mặc dù sẽ không trải rộng 100%.

ul { 
    width: 100%; 
} 
li { 
    float:left; // or display:inline-block; 
}