Border z CSS powoduje przesunięcie do drugiej linijki przy pomniejszaniu przeglądarki np. do 90%

pytanie zadane 22 sierpnia 2021 w HTML i CSS przez LukeLight123 Nowicjusz (130 p.)

Chodzi mi o to, że jeśli pomniejszę rozmiar strony, a tym samym przeskaluję np. na 90% zoom to mój piąty element w menu zaczyna przechodzić do nowej linijki. Nie rozumiem dlaczego tak jest.

Rozwiązanie: Można box-shadow z insetem zastosować i przez to wewnętrzne obramowanie już nie przenosi do następnej linii.

Problem rozwiązałem, ale zastanawiam się dlaczego tak się dzieje. Okazuje się, że odpowiedzialny jest za to 'border'. Tylko właśnie rzecz w tym, że nie rozumiem z jakiego powodu tak się dzieje. Mógłby ktoś wytłumaczyć czym to jest spowodowane? Bo nie rozumiem zachowania 'border'.

Tutaj jest strona z menu nawigacyjnym o którym wspominałem, na szablonie który szerokość ma ustaloną na 960px: https://jsfiddle.net/LukeLight123/90xqfjy5/2/

Użyć 'Control' i mysz 'scroll' w dół, ew. Ctrl + - i dać 90, 80% itd.

5 odpowiedzi

odpowiedź 22 sierpnia 2021 przez Lid$ Mądrala (6,300 p.)

No bo pierw ustawiasz float:left a później ustawiasz display:block co jest sprzeczne ze sobą.

1	komentarz 22 sierpnia 2021 przez LukeLight123 Nowicjusz (130 p.) Niestety nie rozumiem co teraz masz na myśli. Mógłbyś trochę szerzej opisać co dokładniej jest sprzeczne ze sobą i dlaczego tak jest? Ewentualnie jakiś przykład, który działa tym twoim poprawnym sposobem dołączyć np. na JSFiddle.

komentarz 22 sierpnia 2021 przez LukeLight123 Nowicjusz (130 p.)

Piszesz głupoty. Nawet nie patrzyłeś na kod źródłowy.

komentarz 22 sierpnia 2021 przez Lid$ Mądrala (6,300 p.)

Dodałem do stylów tylko:

ul{
     display: flex;
}

I już zachowuje się prawidłowo twój "piąty element".

komentarz 23 sierpnia 2021 przez Lid$ Mądrala (6,300 p.)

@LukeLight123, Po prostu jak masz float:left to zawija do lewej a jak nie ma miejsca to przeskakuje do dołu. Musiałbyś z każdym skalowaniem sprawdzić czy element nie jest za duży i ewentualnie go skrócić. Albo dać display: flex i będzie cały czas tak samo ale jeśli nie będzie się mieścił to wyjdzie z bloku obejmującego. Są różne rozwiązania ale to już możesz poczytać we własnym zakresie.

komentarz 23 sierpnia 2021 przez LukeLight123 Nowicjusz (130 p.)

Co dokładnie mogę poczytać we własnym zakresie? Powiedz swoje propozycje co mam wpisać w google, żebym się dokształcił.

1	komentarz 23 sierpnia 2021 przez Lid$ Mądrala (6,300 p.) Wpisz "zasady savoir-vivre'u".

odpowiedź 22 sierpnia 2021 przez SzkolnyAdmin Szeryf (88,920 p.)
edycja 22 sierpnia 2021 przez SzkolnyAdmin

Zmień w stylu:

 nav ul li a {
                
                width:192px;
                height: 42px;
              	box-sizing: border-box;
/* reszta bez zmian */
         
            }

 .nadpisanie {
                
width: 192px;
/*reszta bez zmian */
}

Po przeskalowaniu szerokość bloków była minimalnie większa od 192 pikseli (dlaczego? też chciałbym wiedzieć) i piąty element już się nie mieścił w bloku o szerokości 960 pikseli.