Dlaczego inline-block w moim przypadku nie działa?

Question

inline-block powinień ustawić elementy obok siebie a u mnie to wogóle nie działa jak widać:
https://codepen.io/dvmvnvq/pen/KexaVy

Bardzo byłbym wdzięczny gdyby ktoś mi mógł pomóc i jednocześnie wyjaśnić dlaczego nie działa pomimo że robiłem wszystko krok po kroku według kursu.

Answer 1

`display: inline-block` sprawia że element ma wysokość linii tekstu i ładnie pasuję nam do paragrafu. Żeby ustawić elementy obok siebie musisz użyć np. kontenera z ustawionym `display: flex`, lub po prostu zrobić to za pomocą `float`.

Btw. zamiast podawać tą długą listę elementów którym chcesz standardowo wyzerować pewne wartości możesz użyć operatora *

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Comments

Czy nadanie tych 3 wartości do KAŻDEGO elementu nie jest złym pomysłem?

---

Dla mnie jest to bardzo przydatny trick css, wtedy wielkość elementu jest zależna tylko od parametrów `width`, `height` i marginesów, nie zaskoczy cię `div` wyskakujący z kontenera przez 2px border'u. W każdym razie, przydatne w takiej sytuacji jest ustalić też:

*, *:before, *:after { box-sizing: inherit; }

Wtedy mamy jasną dziedziczność a nasz `box-sizing: border-box` można ograniczyć do elementu `:root`.

Answer 2

Nie jestem przekonany czy aby na pewno układanie elementów na stronie za pomocą inline-block, było poprawne a już na pewno wygodne. Jest tyle świetnych możliwości na ustawienie elementów w rzędzie. Najprościej użyć flex tutaj masz artykuł na css-trick niestety po angielsku ale po polsku jakieś poradniki znajdziesz. Stosując to ustawisz wszystkie elementy 2 linijkami kodu.

Zgłoszenie masz w związku z złą kategorią.

Comments

Z angielskim nie mam problemu, więc chętniei sprawdzę ten artykuł dziękuje!
Najbardziej mnie denerwowało że mój kod był identyczny z tym który robił gościu z tutorialu i jakimś cudem u mnie to wogóle nie działało co nie miało logicznego sensu.
 

A co do kategorii to nie wiem jakim cudem wybrało mi C+ skoro kliknąłem "programowanie"

Dam znać jeśli flex lepiej zadziała dziękuje!

---

@kenjiro244,

Użyłem flexa po czym zauważyłem że ikony są ustwanione pionowo zamiast poziomowo więc użyłem do nich inline-block i wszystko teraz działa jak należy!

html {
	 font-family: sans-serif;
}


header {
	background-color: #3B5998;
	height: 300px;
	display: flex;
}

.logo-area {
/*	display: inline-block;*/
	/*float: left;*/
}

.logo-area a {
	color: white;
	text-decoration: none;
	font-size: 20px;
}


.user-home ul li{
/*	display: flex;*/
	/*float: left;*/
	display: inline-block;

}


.user-icons ul li{
/*	display: flex;*/
/*	float: left;*/
display: inline-block;
}

.privacy ul li{
/*display: flex;*/
	/*float: left;*/
}

.search-field ul li{
/*	display: flex;*/
	/*float: right;*/
	display: inline-block;
}

 

---

Po wybraniu programowania musisz jeszcze wybrać język bo automatycznie wybiera c/c++.

A co do ikonek flex działa tylko na dzieci kontenera któremu wybrałeś display: flex. A ikony masz w w dalej to znaczy flex zadziała na div

<div class="user-icons">

A żeby tobie zadziałało na ikony musiałbyś dodać kolejnego flex-a na listę ul która znajduje się w tym divie.