Stylizowanie <li> z <ul>

Question

Cześć,

Stworzyłem menu jak w poniższym linku:

https://codepen.io/Piotr-bikowski/pen/LYJZeVo

Zależy mi aby każdy <li> z listy miał border-bottom. Niestety to nie działa.

Ku mojemu zdziwieniu zaczyna działać jeśli usunę klasę ul li:last-child - wtedy obramowanie się pojawia. Nie chcę jednak usuwać tej klasy, gdyż ostatni element nie powinien posiadać obramowania...

Czy ktoś wie dlaczego tak się dzieje?

Comments

Zamiast:

<a href="#"><li>Akordeony</li></a>
<a href="#"><li>Nagłośnienie</li></a>
<a href="#"><li>Kurs</li></a>

Powinno być:

<li><a href="#">Akordeony</a></li>
<li><a href="#">Nagłośnienie</a></li>
<li><a href="#">Kurs</a></li>

 

Answer 1

... tak, HTML jest Ok

Sprawdź ten zapis

<ul>
  <li> ... </li>
  <li> ... </li>
</ul>

i pomyśl jak poprawić zapis kodu html, aby Twój kod css zadziałał zgodnie z Twoimi oczekiwaniami.  

 

W ramach ciekawostki, pomimo błędnego zapisu w <ul>  

		<div class="store-menu">
			<ul>
				<a href="#"><li>Akordeony</li></a>
				<a href="#"><li>Nagłośnienie</li></a>
				<a href="#"><li style="border-bottom: 0">Kurs</li></a>
			</ul>
		</div>

 

lub

		<div class="store-menu">
			<ul>
				<a href="#"><li>Akordeony</li></a>
				<a href="#"><li>Nagłośnienie</li></a>
				<a href="#"><li class="last">Kurs</li></a>
			</ul>
		</div>

...

.store-menu ul li.last
{
    border-bottom: 0;
}

 

Comments

zaczęło działać :) super dzięki

Answer 2

Hej,

sprawdź dokładnie kod HTML. Czy na pewno lista znaczniki w liście są napisane prawidłowo?

Comments

Hej,

tak, HTML jest Ok… coś chyba nie tak z tym last-child…

---

No nie do końca. Sprawdź, jakie elementy dopuszcza znacznik ul wewnątrz.