display: inline-block zamiast float: left

Question

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.

Answer 1

Można.

Proszę, zapoznaj się z tym tematem:

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

Comments

Jak już pisałem:

Pewnie dlatego iż <li></li> posiada display: list-item;

http://www.w3schools.com/cssref/playit.asp?filename=playcss_display&preval=list-item

 

---

No ale pierwsze li wyświetla się w linii jeden obok drugiego a drugie pod spodem

---

Skoro <li></li> posiada list-item to dlaczego to pierwsze li czyli ol > li wyświetla się jeden obok drugiego?

---

https://jsfiddle.net/s2kgfoz3/ tak powinno działać

---

Już wiem -> chodzi o szerokość dlatego przechodzi do nowej linii :)