Đồng đều các liên kết trên một điều hướng ngang

Question

Tôi đang cố gắng tìm một phương pháp đơn giản để nhận tất cả các liên kết trải đều trên điều hướng ngang. Điều này sẽ rất dễ dàng nếu nó sẽ là một số lượng cố định của các liên kết, nhưng chúng sẽ được năng động.

Vì vậy, có thể là 5 hoặc 10 liên kết, không ai biết. Mặc dù số lượng liên kết tôi muốn chúng lây lan đều trên điều hướng mà không cần sử dụng bảng.

Lý do tôi không muốn sử dụng bảng là vì nó sẽ phá vỡ cấu trúc UL LI (rõ ràng) được coi là cách để đi khi tạo điều hướng (SEO).

Dưới đây là một jsFiddle giải thích nó nhiều hơn trong chiều sâu: http://jsfiddle.net/pkK8C/19/

Looking for the phương pháp ánh sáng nhất.

Cảm ơn bạn trước.

Answer 1

Sử dụng display: table cho UL và display: table-cell cho LI. Và display-table.htc cho IE6/7 nếu chúng quan trọng.

Answer 2

Cũ trình duyệt có thể là một nhức đầu, nhưng nó hoạt động cho những người mới:

div#navigation ul { 
    list-style-type:none; 
    height:30px; 
    text-align:center; 
    width: 100%;  /* new */ 
    display: table; /* updated */ 
} 

div#navigation ul li {   
    margin-left:50px; 
    display: table-cell; /* updated */ 
} 

Answer 3

Đây là giải pháp jQuery phân tán đồng đều các liên kết tới 100% yếu tố hạn chế. Các liên kết ngoài cùng bên phải và bên phải được kết thúc đến hết.

jQuery:

pad_menu() tăng đệm cho đến khi li cuối cùng trôi nổi dưới đầu tiên sau đó giảm đệm bởi một, do đó li cuối cùng đã trở lại trên cùng một dòng. var i dừng vòng lặp vô hạn (mà không bao giờ nên xảy ra dù sao đi nữa).

$(document).ready(function(){ 
    pad_menu(); 
    }); 

    function pad_menu() { 
    var i = 0; 
    var pos_first; 
    var pos_last; 
    var pad = $('#menu li').css('padding-left').replace(/[px]/, ''); 

    do { 
     pad++; 
     $('#menu li').css('padding-left', pad); 
     $('#menu .first-item').css('padding-left', 0); 
     $('#menu .last-item').css('padding-left', 0); 
     pos_first = $('#menu .first-item').position(); 
     pos_last = $('#menu .last-item').position(); 
    } while (pos_first.top == pos_last.top && ++i < 100) 
    $('#menu li').css('padding-left', pad-1); 
    $('#menu li.first-item').css('padding-left', 0); 
    $('#menu li.last-item').css('padding-left', 0); 
    } 

HTML & CSS:

ul#menu li { 
display: inline; 
float: none; 
padding: 5px 0px 5px 20px; 
} 
ul#menu li.first-item, ul#menu li.last-item { 
padding-left: 0px; 
} 

<ul id='menu' class='cols'> 
    <li class='first-item'><a href='page1.html'>Page 1</a> 
    <li><a href='page2.html'>Page 2</a></li> 
    <li><a href='page3.html'>Page 3</a></li> 
    <li><a href='page4.html'>Page 4</a></li> 
    <li><a href='page5.html'>Page 5</a></li> 
    <li><a href='page6.html'>Page 6</a></li> 
    <li><a href='page7.html'>Page 7</a></li></a></li> 
    <li class='last-item'></li> 
</ul> 

Answer 4

Có một giải pháp đẹp hơn ở đây, nơi bạn sử dụng text-align:justify:

How do I *really* justify a horizontal menu in HTML+CSS?

Đọc câu trả lời được chấp nhận một cách cẩn thận mặc dù, các chú ý sau đây được áp dụng:

• Spaces trong văn bản LI của bạn cần phải được thay thế bằng   hoặc họ sẽ được tính là khoảng trống giữa mặt logic của bạn (  không làm việc)
• Bạn cần có khoảng trắng trong HTML của bạn giữa LIS của bạn (có thể là một hình ảnh xác thực nếu bạn đang tạo chúng trong vòng lặp PHP.