codice:
HTML:
- <span class="nome">Giammarco</span>
<span class="cogn">Rocca della Padula</span>
<span class="ord">102</span>
- <span class="nome">Ivo</span>
<span class="cogn">Rea</span>
<span class="num">4</span>
...
CSS:
ol {
margin: ...; /* se serve */
...
}
li {
margin: 0 0 0 2em;
padding: 0;
width: 30em; /* da regolare */
float: left; /* per ordinare per riga */
}
li span {
display: block;
overflow: hidden; /* da valutare */
margin: 0 .3em 0 0;
}
li .nome {
width: 10em;
}
li .cogn {
width: 15em;
}
li .num {
width: 3em;
}
Questo e` solo un esempio. Naturalmente le varie dimensioni vanno sistemate e potrebbe essere necessario aggiungere altre formattazioni in base alle esigenze e all'estetica.
Il display:block serve per trasformare in tipo block gli elementi che di default sono inline, in modo da poterne definirne le dimensioni.
Nota che il tag [list=1] gia` inserisce la numerazione; il margine sinistro ai vari[*] serve per lasciarne il posto.