Mehrzeilige Liste Horizontal ausrichten

[abchilla]

Also ich habe folgendes Problem. Ich möchte eine Liste <ul> <li> ... </ul> mehrzeilig horizontal ausrichten. Dies habe ich zwar schon hinbekommen, aber was passiert ist das mir die Liste

Code: Alles auswählen

<ul>
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li>
</ul>


wie folgt ausgeben wird

version 1:

1 2 3
4 5

ich würde aber gerne dass mir diese liste

1 3 5
2 4

ausgegeben wird, also die fortsetzung zuerst nach unten..

so sieht mein CSS für version 1 aus.

Code: Alles auswählen

#head_mid_box ul  {
list-style: none;
margin: 0;
padding: 10px 9px 10px 9px;
overflow: auto;
width: 444px;
}

#head_mid_box li {
color: white;
display: inline-block; 
font: bold 14px Arial, sans-serif;
margin: 0 auto 10px auto;
text-align: left;
vertical-align: top;
width: 142px;
}

* html #head_mid_box li {
   display: inline;
}

*:first-child+html #head_mid_box li {
   display: inline;
}

Bitte hilft mir die Version 2 hinzubekommen!

[sejuma]

Einfach und pragmatisch: Die Reihenfolge der Listeneinträge im HTML-Teil entsprechend ändern.

Ansonsten könntest du es so machen:

Code: Alles auswählen

<ul>
<li> 1 </li>
<li> 2 </li>
</ul>
<ul>
<li> 3 </li>
<li> 4 </li>
</ul>
<ul>
<li> 5 </li>
</ul>

In diesem Fall ul mit "float: left;" versehen, bei li das "display: inline-block" löschen und die Breitenwerte anpassen.