CSS-Auto-Änderung UL-Breite, wenn li erhöhen (links schwebend)

Question

Ich habe ein Problem, UL-Breite automatisch zu beheben, dass LI kann gerade schwimmen. Wenn ich CSS ändere, setze UL mit einer Breite wie '1000px', nicht 'auto'; das, was ich will, kann getan werden.

Gibt es aber andere Einstellungen nur durch CSS auch kann das gleiche Ergebnis erzielen ?, weil ich UL-Breite als steigende Anzahl von LI automatisch ändern möchte.

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

Vielen Dank für Ihre Beratung.

Answer 1

Sie können dies erreichen, indem Sie Ihr 'li' auf display als inline-block setzen, anstatt sie zu schweben. Sie sollten dann die white-space auf der ul nowrap setzen, um sie alle auf der gleichen Linie zu zwingen. So etwas wie das:

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

Sie können jetzt so viele li hinzufügen, wie Sie möchten, und Ihre ul wird weiter wachsen.

Es gibt ein paar Dinge, die Sie berücksichtigen sollten, wenn diese Technik verwendet:

• Dies könnte eine horizontale Scrollbar erzeugen und Benutzer hassen diejenigen
• Sie müssen möglicherweise einige extra css hinzuzufügen das zu machen inline-block arbeiten in legacy browsers
• Ihre ul Breite wird die Breite der übergeordneten nicht überschreiten, wie in der Geige Beispiel unten gezeigt. Die li 's sind in der Tat ihre Eltern überlaufen. Nicht wirklich ein Problem, aber Sie müssen möglicherweise kreativ sein, wenn Sie mit Hintergründen auf dem ul arbeiten.

Für eine einfache Geige, die die Technik demonstriert: http://jsfiddle.net/KgyHZ/213/