Allinea come un tavolo ma con i CSS?

Question

È possibile allineare le 2 righe seguenti come una tabella? La prima riga è un h2 perché è il titolo e il resto sono elenchi. La prima colonna dovrebbe essere abbastanza ampia, ma il resto può essere largo quanto il testo all'interno. Le colonne devono riempire la larghezza dello div.

<div> 
<h2 class="header1"> 
<span class="span1">one</span> 
<span class="span2">two</span> 
<span class="span3">three</span> 
<span class="span4">four</span> 
</h2> 
<ul><li> 
<span class="span5">five</span> 
<span class="span6">six</span> 
<span class="span7">seven</span> 
<span class="span8">eight</span> 
</li></ul> 
</div> 

div {width: 500px;} 
h2 span, li span {float: left; width: auto; white-space: nowrap;} 

Esempio:

Answer 1

Il codice HTML

<div class="table-like"> 
    <div> 
    <span>one</span> 
    <span>two</span> 
    <span>three</span> 
    <span>four</span> 
    </div> 
    <div> 
    <span>five</span> 
    <span>six</span> 
    <span>seven</span> 
    <span>eight</span> 
    </div> 
</div> 

Il CSS

.table-like { 
    display: table; 
    width: 500px; 
} 

.table-like div { 
    display: table-row; 
} 

.table-like div span { 
    display: table-cell; 
} 

/* add borders */ 
.table-like, 
.table-like div span { 
    border: 1px solid black; 
} 

/* bold on 1st row */ 
.table-like div:nth-child(1) { 
    font-weight: bold; 
} 

jsFiddle Demo

Answer 2

Onestamente, se si sta cercando di visualizzare i dati tabulari, utilizzare una tabella. Non c'è niente di sbagliato nelle tabelle, solo quando le utilizzi per posizionare contenuti non tabellari. Se hai bisogno di aiuto per formattare una tabella, modifica la tua domanda.

Answer 3

Tenta di utilizzare il display: inline-block:

h2{display: inline-block; margin:0 padding:0; min-width: 300px}/*use min-width what you want*/ 
ul, ul li{display: inline-block; margin:0; padding: 0;}