Elencazione con i css

[js80]

Ciao a tutti!

Chiedo consigli su come poter realizzare un efficace elencazione tramite i fogli di stile.
A video, le varie voci (che estraggo da database in postgresql) mi devono apparire nel seguente modo:

voce 1
.....voce 2
..........voce 3
.....voce 4
.....voce 5
..........voce 7
...............voce 8
..........voce 9
.....voce 6
.............................

L'indentatura (o meglio il padding a sinistra, indicato con i puntini) deve aumentare con l'aumentare del livello (la voce 1 è a livello 0 mentre la voce 8 è a livello 4).
E' possibile realizzare un foglio di stile efficiente per realizzare una situazione di questo tipo?

Grazie
CIAO

[thomas_anderson]

ciao!
con i CSS in teoria dovresti usare un ID diverso per ogni voce, cosa che genererebbe molto codice inutile. per una migliore accessibilità della pagina ti consiglio di usare uno script lato server che aumenti dinamicamente il padding all'aumentare dell'id della voce. ovvero con la relazione:

if [id=x]
padding-left:  y;

oppure lo fai con i CSS, cosa che non ti consiglio. ciao

[fcaldera]

se conosci a priori il numero massimo di livelli è relativamente semplice

(X)HTML:

<ul class="level0">[*]voce1[*]
    <ul class="level1">[*]voce2[*]
        <ul class="level2">[*]voce3[/list]
      [*]voce3[*]voce4[/list]
  
  ... [/list]

CSS:

ul {
  margin: 0;
  padding : 0;
}

.level0 { margin-left: 0;}
.level1 { margin-left: 5em;}
.level2 { margin-left: 10em;}
.level3 { margin-left: 15em;}
...

[pierofix]

Ma anche senza classi.

ul,
ul ul,
ul ul ul,
ul ul ul ul,
{
   margin-left:2em;
}

Si può andare avanti quanto si vuole.