CSS automatyczna zmiana szerokości ul przy zwiększaniu li (unosząc się w lewo)

Question

Mam problem z automatycznym ustawianiem szerokości UL, że LI może pływać prosto.

Jeśli zmienię css, ustaw UL na szerokość podobną do '1000px', a nie 'auto'; tego, czego chcę, można zrobić.

Jednak czy istnieją inne ustawienia tylko CSS również może osiągnąć ten sam wynik ?, ponieważ chcę automatycznie zmienić szerokość UL jako zwiększenie liczby LI.

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; 
} 

Dziękuję bardzo za poradę.

Answer 1

Możesz to osiągnąć, ustawiając swoje "li" na display jako inline-block zamiast je przestawiać. Powinieneś wtedy ustawić white-space na ul do nowrap, aby wymusić je wszystkie na tej samej linii. Coś takiego:

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

Możesz teraz dodać dowolną liczbę li, a Twój ul będzie nadal rósł.

Istnieje kilka rzeczy, które należy wziąć pod uwagę przy użyciu tej techniki:

• To może produkować poziomego paska przewijania, a użytkownicy nienawidzę tych
• może trzeba dodać trochę extra css aby inline-block praca w legacy browsers
• Twoja szerokość nie przekroczy szerokości nadrzędnej, jak pokazano poniżej w przykładzie skrzypiec. The li są w rzeczywistości przepełnione ich rodziców. Naprawdę nie jest to problem, ale być może trzeba być kreatywnym podczas pracy ze środowiskiem na ul.

Dla prostego skrzypcach, który demonstruje technikę: http://jsfiddle.net/KgyHZ/213/