display: inline-block zamiast float: left

pytanie zadane 29 kwietnia 2016 w HTML i CSS przez Marecki Obywatel (1,690 p.)

witam

Otóż mam pytanie: W filmiku Kurs CSS odc. 3 Pana Mirosława gdzie tworzymy rozwijane menu, Pan Mirosław używa float: left w ol > li. Otóż czy można zamiast tego użyć display: inline-block?? A z ol usunąć ten zapis??

Czyli zamiat:
ol
{
	padding: 0;
	margin: 0;
	list-style-type: none;
	font-size: 18px;
	height: 55px;
	line-height: 300%;
	display: inline-block;
	
}



ol > li
{
	
	float: left;
	width: 150px;
	height: 55px;
	border-right: 1px dashed #751b1b;
	
	
}

zrobić:

ol
{
	padding: 0;
	margin: 0;
	list-style-type: none;
	font-size: 18px;
	height: 55px;
	line-height: 300%;
	
	
}


ol > li
{
	
	display: inline-block;
	width: 150px;
	height: 55px;
	border-right: 1px dashed #751b1b;
		
}

Dziękuję i pozdrawiam.

1 odpowiedź

odpowiedź 29 kwietnia 2016 przez HaKIM Szeryf (87,590 p.)

Można.

Proszę, zapoznaj się z tym tematem:

~ http://stackoverflow.com/questions/11805352/floatleft-vs-displayinline-vs-displayinline-block-vs-displaytable-cell

komentarz 29 kwietnia 2016 przez Marecki Obywatel (1,690 p.)

Problem polega na tym, że po najechaniu (hover) na ol > li te li zjeżdżają niżej aż do poziomu ol > li > ul > li

komentarz 29 kwietnia 2016 przez HaKIM Szeryf (87,590 p.)
edycja 29 kwietnia 2016 przez HaKIM

Podeślij kod HTML i CSS, abym mógł wkleić na przykładową stronę:

~ https://jsfiddle.net/

~ http://codepen.io/

komentarz 29 kwietnia 2016 przez Marecki Obywatel (1,690 p.)

https://jsfiddle.net/ek4r58oj/

komentarz 29 kwietnia 2016 przez Marecki Obywatel (1,690 p.)

Zrób jeszcze jeden poziom :)

komentarz 29 kwietnia 2016 przez HaKIM Szeryf (87,590 p.)

Daj chwilkę, postaram się rozwiązać problem, choć nie wykluczone iż w takich przypadkach jesteśmy skazani na float, w co wątpię. : )

komentarz 29 kwietnia 2016 przez Marecki Obywatel (1,690 p.)

Ok :)

komentarz 29 kwietnia 2016 przez HaKIM Szeryf (87,590 p.)

Cóż, spróbuj użyć czegoś takiego:

[...]

ol > li
{
	display: inline-block;
	width: 150px;
	height: 35px;
	border-right: 1px dashed #751b1b;
}

ol > li:first-child
{
	border-left: 1px dashed #751b1b;
}

ol > li:hover
{
	background-color: #cf6969;
} 

ol > li:hover > a
{
	color: #451717;
}

ol > li > ul
{
	list-style-type: none;
	padding: 0;
	margin: 0;
	height: 40px;
	display: none;
}

ol > li:hover > ul
{
	display: block;
}

ol > li > ul > li
{
  float: left;
  width: 100%;
	background-color:#cf6969;
	position: relative;
	z-index: 100;
	border-top: 1px dashed #751b1b;
}

[...]

Mam nadzieję że taki miał być efekt:

~ https://zapodaj.net/16ddc2d0ad24e.png.html

komentarz 29 kwietnia 2016 przez Marecki Obywatel (1,690 p.)

W ten sposób działa, a wytłumaczysz dlaczego tak?

komentarz 29 kwietnia 2016 przez HaKIM Szeryf (87,590 p.)

Cóż, sądzę iż to dlatego że:

display: inline-block; układa wszystko w linii, gdy rozwijamy menu, on musi być w wraz z innymi elementami na jednym poziomie, przystosowuje się do ostatniego <li></li>, w ol > li > ul > li, gdy dajesz float: left; chyba display: inline-block; reaguje w ten sposób: O, jest to przyklejone to lewej, nie powinienem robić tego, co mam w naturze, czyli przystosowywać się do ostatniego bloku, jako iż float: left; układa wszystko w jednej linii, pionowo.

Serio, to jest magia css'a, nie potrafię tego wytłumaczyć, jak to powiedział Einstein:

Jeżeli nie potrafisz czegoś prosto wyjaśnić - to znaczy, że niewystarczająco to rozumiesz

W tym przypadku jest tako samo.

Musiałbym sięgnąć po spoory artykuł o display: inline-block i float: left, abym mógł Ci to w prosty i przyjazny sposób wytłumaczyć. Jak na razie, można się domyślać. :)

komentarz 29 kwietnia 2016 przez Marecki Obywatel (1,690 p.)

jako iż float: left; układa wszystko w jednej linii, pionowo.

A nie poziomo? Float: left czyli: ułóż w jednej poziomej linii jeden obok drugiego

komentarz 29 kwietnia 2016 przez HaKIM Szeryf (87,590 p.)

Mówiłem, ciężko mi to opisać.

Może tak:

[...] O, jest to przyklejone do lewej, nie powinienem robić tego, co mam w naturze, czyli przystosowywać się do ostatniego bloku, jako iż float: left; układa wszystko w jednej linii, ale zaczynając od góry, więc to góra jest elementem, do którego mam się przystosować.

Przydałby się Comandeer, on dałby radę Ci to wyjaśnić w paru linijkach. :)

komentarz 29 kwietnia 2016 przez Marecki Obywatel (1,690 p.)

Ale bez float: left; nie obejdzie się w tym przykładzie , prawda? :)

komentarz 29 kwietnia 2016 przez HaKIM Szeryf (87,590 p.)

Przyznam, iż bez float: left; miałbym niemały problem z wystylizowaniem tego, ale nie jest to niemożliwe. Anyway, czasami lepiej użyć czegoś, czego nie chcemy, niżeli robić magię w kodzie. Z magią jest mały problem, nie idzie jej zrozumieć.