Menu ma sie wyświetlać tylko poziomo

Question

Witam.

Postanowiłem zrobić poziome: Menu 1, Menu 2, Menu 3, Menu 4 i Menu 5.

Poziomo wyświetla sie tylko: Menu 1 i Menu 5. Niestety pozostałe menu wyświetlają sie pionowo.

Tak to wygląda:

https://jsfiddle.net/Krzysiek_35/rszb9c7e/28/

Chciałbym, aby: Menu 1, Menu 2, Menu 3, Menu 4 i Menu 5 ---> wyświetlały sie poziomo.

Dopisywałem do odpowiednich selektorów display: inline-block, ale niestety nic nie pomogło.

Czy wiecie gdzie tkwi błąd, że te wszystkie menu nie wyświetlają sie poziomo?

Będę bardzo wdzięczny za fachową pomoc.

Answer 1

Nadałeś szerokość dla menu która uniemożliwia rozmieszczenie items w linii

.menu ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	float: left;
	width: 9em;//9 x 16 = 144px
}

skasuj to width i nadaj  inline-block oraz width dla li

.menu li
{
	position: relative;
	min-height: 1px;
	vertical-align: bottom;
    display: inline-block;
    width: 80px;
}

 

Comments

Są postępy, ale nie jest do końca dobrze.

Spójrz jak to wygląda:

https://jsfiddle.net/Krzysiek_35/rszb9c7e/31/

Menu 1, Menu 2 i Menu 3 - są oddzielone od siebie, a mają być połączone.

Menu 4 i Menu 5 - są ze sobą połączone, ale i tak nie wygląda to za dobrze.

Zauważ, że te robocze strzałki skierowane w prawo pojawiły sie w miejscu cyfr: 1, 2, 3 i 4.

Chciałbym, aby:

1. Wszystkie menu były ze sobą połączone.

2. Robocza strzałka skierowana w prawo ma sie znajdować po prawej stronie od cyfry: 1, 2, 3 i 4 (tak jak jest wyświetlane w tamtym pierwszym linku).

Czy wiesz jak to teraz naprawić?

Czy mam dopisać "width: ???" do jakiegoś selektora?

---

Aby pozbyć się odstępów (domyślny margines) należy użyć ujemnego marginesu. lepiej w tej sytuacji zastosować float, ale należy pamiętać o clearfix

.menu li
{
	position: relative;
	min-height: 1px;
	vertical-align: bottom;
  float:left;
  width: 80px;
}
//clearfix
.menu ul::after {
  content: "";
  clear: both;
  display: table;
}

Jeżeli chodzi o strzałki to jak napisałem wcześniej dodaj width do .menu li

A NAJLEPIEJ UŻYJ FLEXBOX i nie stosuj float do takich zadań. Został on stworzony do opływania obrazu przez tekst i był takim hakiem w czasach gdy nie było flexboxa czy grida

---

Teraz działa jak należy.

Na ten moment mam zapisane w CSS:

.menu li
{
	position: relative;
	min-height: 1px;
	vertical-align: bottom;
	float: left;
	width: 120px;
}

Wielkie dzięki za pomoc.

Mam jeszcze 2 pytania w tej kwestii.

1. Skoro menu teraz wyświetla sie prawidłowo, po co mam to dopisywać? :

.menu ul::after
{
  content: "";
  clear: both;
  display: table;
}

2. Skoro najlepiej użyć flexboxa i nie stosować float do takich zadań, to pod jakim względem bedzie to lepsze rozwiązanie?

---

1. clearfix jest potrzebny żeby nie utracić wysokości pojemnika. Daj border dla ul to zobaczysz różnice.

2. Lepiej perfumować, czy lepiej pozbyć się smrodu :)

Po po prostu to jest naturalne podejście.

---

Zapisałem w CSS:

.menu ul:after
{
	content: "";
	display: table;
	clear: both;
}

.menu li
{
	position: relative;
	min-height: 1px;
	vertical-align: bottom;
	float: left;
	width: 120px;
}

Ma być w końcu (wariant 1 - podany z neta):

.menu ul:after

czy (wariant 2 - podany przez Ciebie):

.menu ul::after

Który wariant jest prawidłowy?

---

Oba. Pseudoklasy jeden dwukropek, pseudoelementy dwa. Ale jak zawsze napiszesz jeden to też będzie dobrze.

---

Jeszcze raz dzięki za pomoc.

Temat uważam za zamknięty.

Answer 2

Brakuje mu klasy top_parent i znajduje się poza listą pozostałych elementów.

Comments

Dopisałem w CSS:

.top_parent
{
	display: inline-block;
}

...i niestety dalej jest to samo. Nie ma żadnej poprawy. Próbowałem też innych wariantów i dalej nie ma poprawy. :(

Answer 3

To ja też dodam od siebie cegiełkę. Mianowicie musiałem trochę zmienić  menu  style  są napisane od nowa jak i konstrukcja  została lekko zmodyfikowana tak aby można było to poukładać. Przerobione menu wrzucam tutaj