Come ottenere un albero in HTML utilizzando puro CSS

Question

Sto cercando di seguire questo tutorial e qui è my code finora.

La fine del tutorial mostra che gli ultimi nodi in un ramo non avranno barre verticali dopo di esso. Ma non riuscivo a farlo funzionare in quel modo !. Qualsiasi idea se sto facendo qualcosa di sbagliato, o forse il tutorial manca qualcosa!

Ho provato anche la pseudo classe: last-child come mostrato nel tutorial, ma ho ottenuto lo stesso risultato.

Answer 1

Purtroppo, la pseudo-classe è definita nella specifica CSS3 imminente e in questo momento alcuni browser lo supportano.

È scritto alla fine del tutorial. Forse è questo il motivo per cui non funziona.

Answer 2

Credo di aver riparato: https://github.com/gurjeet/CSSTree/pull/1

ho modificato il CSS per rimuovere lo sfondo e cambiato margine per imbottitura.

ul.tree, ul.tree ul { 
    list-style-type: none; 
    margin:0; 
    padding:0; 
} 

ul.tree ul { 
    padding-left: 1em; 
    background: url(vline.png) repeat-y; 
} 

ul.tree li { 
    margin:0; 
    padding: 0 1.2em; 
    line-height: 20px; 
    background: url(node.png) no-repeat; 
    color: #369; 
    font-weight: bold; 
} 

/* The #fff color background is to hide the previous background image*/ 
ul.tree li.last { 
    background: #fff url(lastnode.png) no-repeat; 
} 

ul.tree ul:last-child { 
    background: none; 
} 

Answer 3

Ecco una prova usando solo pseudo-elementi e confini:

ul, li{  
    position: relative;  
} 

/* chop off overflowing lines */ 
ul{ 
    overflow: hidden; 
} 

li::before, li::after{ 
    content: ''; 
    position: absolute; 
    left: 0; 
} 

/* horizontal line on inner list items */ 
li::before{ 
    border-top: 1px solid #333; 
    top: 10px; 
    width: 10px; 
    height: 0; 
} 

/* vertical line on list items */  
li::after{ 
    border-left: 1px solid #333; 
    height: 100%; 
    width: 0px; 
    top: -10px; 
} 

/* lower line on list items from the first level 
    because they don't have parents */ 
.tree > li::after{ 
    top: 10px; 
} 

/* hide line from the last of the first level list items */ 
.tree > li:last-child::after{ 
    display:none; 
} 

demo (modificati)

Answer 4

Grazie ragazzi, risposte utili che mi ha fatto leggere un po ', e alla fine ho letto this article e rimosso tutta la dipendenza da JavaScript e utilizzato lo pseudo-selettore nth-last-of-type per applicare lo sfondo speciale agli ultimi elementi di una lista (ignorando l'ul che viene dopo l'ultimo li).

Il codice finale è here. Accetterò la mia risposta, a meno che qualcuno non indichi qualche problema. (Non credo che la compatibilità con i vecchi browser sia importante per me in questa fase.)

Grazie a @Aram per la risposta. @OneTrickPony, la tua risposta è andata oltre la testa di questo noob :) Sono sicuro che fa la cosa giusta, ma è un po 'troppo complicato per me.

<style type="text/css"> 
/* ul[class=tree] and every ul under it loses all alignment, and bullet 
* style. 
*/ 
ul.tree, ul.tree ul { 
    list-style-type: none; 
    margin:0; 
    padding:0; 
} 

/* Every ul under ul[class=tree] gets an indent of 1em, and a background 
* image (vertical line) applied to all nodes under it (repeat-y) 
*/ 
ul.tree ul { 
    padding-left: 1em; 
    background: url(vline.png) repeat-y; 
} 

/* ... except the last ul child in every ul; so no vertical lines for 
* the children of the last ul 
    */ 
ul.tree ul:last-child { 
    background: none; 
} 

/* Every li under ul[class=tree] 
* - gets styling to make it bold and blue, and indented. 
* - gets a background image (tilted T), to denote that its a node 
* - sets height to match the height of background image 
*/ 
ul.tree li { 
    margin:0; 
    padding: 0 1.2em; 
    background: url(node.png) no-repeat; 
    line-height: 20px; 
    color: #369; 
    font-weight: bold; 
} 

/* The last li gets a different background image to denote it as the 
* end of branch 
*/ 
ul.tree li:nth-last-of-type(1) { 
    background: url(lastnode.png) no-repeat; 
}