Jak uzyskać drzewo w HTML za pomocą czystego CSS

Question

Próbuję do tej pory śledzić to tutorial i tutaj jest my code.

Koniec tutorialu pokazuje, że ostatnie węzły w oddziale nie będą miały żadnych pionowych pasków po nim. Ale nie mogłem tego zrobić działając w ten sposób !. Wszelkie pomysły, jeśli robię coś nie tak, a może w samouczku czegoś brakuje!

Próbowałem nawet pseudo-klasy: ostatni-dziecko, jak pokazano w samouczku, ale otrzymałem ten sam wynik.

Answer 1

Niestety, pseudo-klasa jest zdefiniowana w nadchodzącej specyfikacji CSS3 iw chwili kilku przeglądarek internetowych wspierać.

Jest to napisane na końcu samouczka. Może to dlatego nie działa.

Answer 2

wierzę Naprawiłem go: https://github.com/gurjeet/CSSTree/pull/1

zmodyfikowałem CSS, aby usunąć tło i zmienił margines do wypełnienia.

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

Oto spróbuj użyć tylko pseudo-elementy i granice:

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 (edytowane)

Answer 4

Dziękujemy wam, pomocne odpowiedzi co mnie czytać trochę więcej, i wreszcie czytam this article i usunął wszystkie zależności od JavaScript i użył pseudo-selektora nth-last-of-type, aby zastosować specjalne tło do ostatnich elementów li na liście (ignorując ul, który pojawia się po ostatnim li).

Ostateczny kod to here. Przyjmuję własną odpowiedź, chyba że ktoś wskaże na pewien problem. (Nie sądzę, aby na tym etapie liczyła się kompatybilność ze starszymi przeglądarkami).

Podziękowania dla @Aram za odpowiedź. @OneTrickPony, twoja odpowiedź przeszła przez głowę temu noobowi :) Jestem pewien, że robi to dobrze, ale jest to dla mnie zbyt skomplikowane.

<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; 
}