Jak zrobic by to bylo w jednej lini (dolnej)? Skad bierze sie ta dodatkowa przestrzen? Wiem, ze jak usune cien, to wtedy nie mam tego widocznego. Ale nic to nie zmienia. Wiem takze, ze jest to jakis problem z floatem (gdy icon nie ma floata to takie rzeczy sie nie dzieja), jak rozwiazac ten problem?
0
1
a nie wystarczy ci ustawic: .menu-btn na float:left ??
0
no niby wyrownuje to (przynajmniej o tyle dobrze). A jest sposob by zrobic to na display: inline-block?
edit i czemu margin-top nie działa dla pierwszego elementu ? (teraz jest zakomentowany, ale pod odkomentowaniu nadal nie działa)
1
flex by zadzialal, ale to nie bardzo kompatybilne.
1
Jak elementom wewnątrz inline-block dajesz floaty, to musisz liczyć się z tym, że floaty pomiędzy obiektami rodziców będą nachodzić na siebie (głównie z tego powodu rozsypuje Ci się layout). Ponadto elementy inline-block mają wpływ na siebie nawzajem, a to jeszcze bardziej komplikuje sytuację. Zrób to jeszcze raz od nowa, krok po kroku, i zobacz w którym momencie zacznie się rozsypywać.
Float jest obsługiwane od czasów starożytnych IE (czyli 7 to obsługuje), więc jak już krok po kroku dojdziesz do tego, że inaczej się nie da (chyba, że użyjesz position:relative/absolute albo będziesz manipulować ujemnymi marginesami), to użyj go.