Dzień dobry, jestem początkujący w html i css, poczytałem trochę teorii, następnie przeszedłem do praktyki i wszystko szło ładnie do momentu ustawienia szerokości elementu "a" w liście, mam pięć elementów, ustawiłem width: 20%. Nie mam pojęcia, dlaczego cyfra przy przycisku przeskakuje do nowej linii, w przypadku, gdy wezmę szerokość width:20 % w znaczniku nav ul li - problem znika. Prosiłbym o wytłumaczenie z czego to wynika. Poniżej link z kodem:
0
1
Zrób inspekcję na elemencie, sprawdź "layout" i "computed" a się dowiesz.
Problemem jest że dałeś elementowi a - display: block - teraz element "a" jest blokiem, ale dałeś mu też width: 20% czyli ten blok stara się zmieścić w 20% parenta, natomiast parent (li) nie ma ustalonej szerokości i próbuje się dopasować z kolei do rozmiaru swojej treści. li otrzymuje więc szerokość równej minimalnej możliwej żeby pomieścić swoje elementy, natomiast a próbuje się zmieścić w 20% tego (+padding). Widzisz całą treść a tylko dlatego że domyślnie
nadmiar treści (overflow) jest widoczny. Gdy dodasz overflow: hidden do elementu a to zobaczysz że treść się nie mieści i zobaczysz tylko fragment Przy
Możesz zapobiec zawijaniu wierszy przez white-space: nowrap, ale tak naprawdę powinieneś zdjąć width z a i nadać go na li, albo lepiej użyć grida / flexboxa do tego
0
Akurat w computed widać, że się nie mieści w layout nie widzę żadnej z opcji. Jeśli li nie ma zdefiniowanej szerokości to tworzy z automatu taką by pomieścić elementy w linii?