Mostrar elementos de elementos de lista en columnas diferentes

Intento cambiar el aspecto de una plantilla de DataLife Engine, y me pregunto si podría ayudarme con la alineación.

Tengo cierta información que se muestra en una columna, como esta:

  • A
  • B
  • C
  • D
  • E

Esto se ve como

 A B C D E 

Quiero que se muestren así:

 ABC DE 

El contenido de cada “célula” puede ser diferente. Por ejemplo, si B tiene más contenido, me gustaría ajustar las columnas de la siguiente manera:

 ABC B B DE 

Por lo tanto, se extendería hasta que se muestre toda la información. La clase impar simplemente cambia el color de esa celda.

Aquí está la demostración jsfiddle .

Para hacer eso, puede mostrar los elementos de la lista como elementos de inline-block , de la siguiente manera:

 ul { list-style: none; padding: 0; font: 0/0 a; /* Remove space characters between inline-block elements */ } ul li { font: 16px/1 Arial, sans-erif; /* Reset the font property */ display: inline-block; vertical-align: top; /* < -- keep the inline elements at the top */ background-color: #ddd; /* For the demo */ margin: 5px; /* For the demo */ width: 200px; /* For the demo */ } 

Demostración JSFiddle .

Mira jsfiddle

 .table ul{ list-style: none; width: 180px; height: auto; } .table li{ display: inline-block; vertical-align: top; width: 50px; background: rgba(0,0,0,0.2); margin: 3px; }