nth-child, nie dodaje linii css

Question

Hej wytłumaczy mi ktoś jak to jest ? ze nie dodaje linii jeśli dodałam <a> bo wcześniej bez tego na samym <li> dzialalo a teraz już nie.

 

https://jsfiddle.net/mqnmhp7m/

Answer 1

Co daje ci "owijanie" <li> tagiem <a> ? Nie jest to ani poprawne, ani przejrzyste. 

The li element represents a list item. If its parent element is an ol, or ul, then the element is an item of the parent element's list, as defined for those elements. Otherwise, the list item has no defined list-related relationship to any other li element.

Comments

To ze jeśli owine tagiem <a> srodek to hiperlacze będzie dzialac tylko na tekście, a ja chce żeby caly obszar li był pod hiperlaczem, to jak poprawnie można to zrobić? Pozbyc się listy ?

---

display: block;
width:100%;
height: 100%;

dla elementu <a>

---

Oraz mam usunąć ul tak?

---

Zgodnie z cytatem z dokumentacji bez <ul>/<ol>  <li> traci swój sens.

---

Tak rozumiem, chodzi mi o to czy

mam zrobić tak ze usuwam ul, li oraz dla a robie :

display: block;

width:100%;

height: 100%;

Czy mam liste zostawić w spokoju i po prostu dodac te parametry do a ?

---

Zostaw listę w spokoju :)

Answer 2

Przedewszystkim: nie można robi ul>{cokolwiek innego niż li}. Zawsze należy zachować formę ul,ol>li. Dalej; znacznik a jest elementem inline, więc jeżeli chcesz mu nadać border-bottom to musisz zmienić dla niego wartość display, np.: na inline-block. Wtedy nadanie border-bottom zadziała. Jeżeli nadasz color przy takim układzie, to będzie wszystko OK.