wyśrodkowanie nav css

pytanie zadane 29 listopada 2017 w HTML i CSS przez Andrzej Sojka Użytkownik (510 p.)

Dlaczego lista nie jest dokładnie na środku?

https://codepen.io/anon/pen/pdQjMx

2 odpowiedzi

odpowiedź 29 listopada 2017 przez Tomek Sochacki Ekspert (227,510 p.)
wybrane 29 listopada 2017 przez Andrzej Sojka

Najlepsza

Dodaj

padding: 0;

dla elementu <ul>

komentarz 29 listopada 2017 przez Andrzej Sojka Użytkownik (510 p.)

a możesz mi wyjaśnić dlaczego padding:0? mam rozumieć, że lista dodała swój marginesem wewnętrzny?

komentarz 29 listopada 2017 przez accolade Bywalec (2,410 p.)

Lista automatycznie tworzy się z swoim paddingiem i trzeba go wyzerować jeśli się go nie chce.

komentarz 29 listopada 2017 przez Tomek Sochacki Ekspert (227,510 p.)

Element ul dostaje default css, w którym często jest

padding-left: 40px;

a ponieważ jest to w PX dlatego pojawiał się pasek przewijania dolny. Jest też defaul margin top i bottom chyba na 16px albo w em/rem jeśli dobrze pamiętam (poszukaj w google default css in browsers).

komentarz 29 listopada 2017 przez Andrzej Sojka Użytkownik (510 p.)

a ja tyle czasu spędziłem nad, dzieki wielkie za pomoc

komentarz 29 listopada 2017 przez Tomek Sochacki Ekspert (227,510 p.)

a możesz mi wyjaśnić dlaczego padding:0? mam rozumieć, że lista dodała swój marginesem wewnętrzny?

Nie margines, tylko padding :) To istotna różnica, poczytaj sobie o tzw. modelu pudełkowym w CSS i ewentualnie o właściwości box-sizing, która czasami jest przydatna.

komentarz 29 listopada 2017 przez Andrzej Sojka Użytkownik (510 p.)

znam box-sizing, co do odpowiedzi wyżej to miałeś racje

display: block;
list-style-type: decimal;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;

komentarz 29 listopada 2017 przez Tomek Sochacki Ekspert (227,510 p.)

Tylko tak od razu jeszcze mała rada - uważaj na różnego rodzaju resety CSS. Są one opisane w wielu książkach i kursach online i przyznam, że kiedyś zaczynając naukę html/css gdy pierwszy raz zobaczyłem reset.css to ładowałem to po prostu wszędzie...

Z czasem zacząłem patrzeć na stronę/aplikację nie jak na całość, ale jak na zbiór oddzielnych komponentów i okazało się, że resety wcale nie są potrzebne, a pojedyncze problemy rozwiązuje właśnie takie np. dodanie własnego padding dla ul. Ponad to takie myślenie ułatwia pracę np. z React i innymi bibliotekami operującymi na komponentach. Piszę, żebyś nie powielał moich dawnych błędów i mojego dawnego uwielbienia reset.css :)