Chiều rộng tự động thay đổi CSS khi tăng li (nổi bên trái)

Question

Tôi có vấn đề tự động sửa chiều rộng của UL mà LI có thể nổi thẳng.

Nếu tôi thay đổi css, đặt UL với chiều rộng như '1000px', không phải 'auto'; rằng những gì tôi muốn có thể được thực hiện.

Tuy nhiên, có cài đặt nào khác chỉ bởi CSS cũng có thể đạt được kết quả tương tự không ?, vì tôi muốn tự động thay đổi chiều rộng của UL khi số lượng LI tăng.

Now is like 
    div ul-------------------------------div ul 
      | ///////  ////////  | 
      | /////// li /////// li | 
      --------------------------------- 
       ///////  //////// 
       ////// li /////// li 

    I want to be like this 
     div         div 
      ul-------------------------------------------------------------ul 
      | ///////  ////////  | ///////  //////// | 
      | /////// li /////// li | /////// li /////// li | 
      ------------------------------------------------------------- 

http://jsfiddle.net/KgyHZ/21/

HTML

<div class='test'> 
    <ul> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
    </ul> 
</div> 

CSS

.test{ 
    width: 500px; 
    height: 100px; 
    overflow: hidden; 
} 
.test > ul{ 
    list-style:none; 
    width: auto; 
    height: 100%; 
    background-color:#999; 
    display: block; 
    padding: 0px; 
    margin: 0px; 
} 
.test > ul > li{ 
    float: left; 
    display: block; 
    height: 100%; 
    width: 180px; 
    background-color:#99c; 
    margin-right:10px; 
} 

Cảm ơn bạn rất nhiều vì lời khuyên của bạn.

Answer 1

Bạn có thể đạt được điều này, bằng cách đặt 'li' thành display là inline-block thay vì làm nổi chúng. Sau đó, bạn nên đặt white-space trên ul thành nowrap để buộc tất cả chúng trên cùng một dòng. Một cái gì đó như thế này:

ul{ 
    list-style:none; 
    white-space: nowrap; 
} 
ul > li{ 
    display: inline-block; 
} 

Bây giờ bạn có thể thêm bao nhiêu li tùy thích, và ul của bạn sẽ tiếp tục phát triển.

Có một vài điều mà bạn nên đưa vào tài khoản khi sử dụng kỹ thuật này:

• Điều này có thể tạo ra một thanh cuộn ngang và người dùng ghét những
• Bạn có thể cần thêm một số extra css để làm cho inline-block hoạt động trong legacy browsers
• Chiều rộng ul của bạn sẽ không vượt quá chiều rộng của bố mẹ như được minh họa trong ví dụ dưới đây. li thực tế đang tràn ngập cha mẹ của họ. Không thực sự là một vấn đề, nhưng bạn có thể phải sáng tạo khi làm việc với các hình nền trên ul.

Đối với một fiddle đơn giản thể hiện kỹ thuật: http://jsfiddle.net/KgyHZ/213/