• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

VPS Starter Arubacloud
0 głosów
547 wizyt
pytanie zadane 26 czerwca 2018 w HTML i CSS przez dvmvnvq Początkujący (420 p.)
zmienione kategorie 26 czerwca 2018 przez Arkadiusz Waluk
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.

2 odpowiedzi

+2 głosów
odpowiedź 26 czerwca 2018 przez Pac Plus Mądrala (5,560 p.)
edycja 26 czerwca 2018 przez Pac Plus

`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;
}
komentarz 26 czerwca 2018 przez MrxCI Dyskutant (8,260 p.)
Czy nadanie tych 3 wartości do KAŻDEGO elementu nie jest złym pomysłem?
1
komentarz 26 czerwca 2018 przez Pac Plus Mądrala (5,560 p.)

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`.

+1 głos
odpowiedź 26 czerwca 2018 przez kenjiro244 Dyskutant (8,600 p.)

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ą.

komentarz 26 czerwca 2018 przez dvmvnvq Początkujący (420 p.)
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!
komentarz 26 czerwca 2018 przez dvmvnvq Początkujący (420 p.)

@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;
}

 

komentarz 26 czerwca 2018 przez kenjiro244 Dyskutant (8,600 p.)

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.

Podobne pytania

0 głosów
1 odpowiedź 587 wizyt
pytanie zadane 2 stycznia 2019 w HTML i CSS przez Strugaczka Początkujący (260 p.)
0 głosów
0 odpowiedzi 277 wizyt
0 głosów
3 odpowiedzi 870 wizyt
pytanie zadane 23 lutego 2017 w HTML i CSS przez Karol Loczeski Użytkownik (820 p.)

92,455 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...