Il CSS cambia automaticamente la larghezza quando li aumenta (a sinistra)

Question

Ho un problema di correggere automaticamente la larghezza di UL che LI può galleggiare correttamente.

Se cambio css, impostare UL con una larghezza come '1000px', non 'auto'; quello che voglio può essere fatto.

Tuttavia, ci sono altre impostazioni solo da CSS che possono ottenere lo stesso risultato ?, perché voglio cambiare automaticamente la larghezza di UL come numero crescente di 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; 
} 

La ringrazio molto per il vostro consiglio.

Answer 1

È possibile ottenere questo, impostando il "li" su display come inline-block anziché flottante. Dovresti quindi impostare white-space su ul su nowrap per forzarli tutti sulla stessa linea. Qualcosa del genere:

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

È ora possibile aggiungere quanti più desideri e il tuo ul continuerà a crescere.

ci sono alcune cose che si dovrebbero prendere in considerazione quando si utilizza questa tecnica:

• Questo potrebbe produrre una barra di scorrimento orizzontale, e gli utenti odiano quelli
• Potrebbe essere necessario aggiungere un po 'extra css per fare il inline-block lavoro in legacy browsers
• La larghezza dello ul non supera la larghezza del suo genitore, come illustrato nell'esempio di violino di seguito. Gli li stanno infatti traboccando i loro genitori. Non proprio un problema, ma potresti dover essere creativo quando lavori con gli sfondi su ul.

Per una semplice violino che dimostra la tecnica: http://jsfiddle.net/KgyHZ/213/