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

<span> zachowuje się jak element blokowy

Object Storage Arubacloud
+1 głos
247 wizyt
pytanie zadane 30 grudnia 2022 w HTML i CSS przez zbiku25 Gaduła (3,000 p.)

Mam kod jak poniżej. Nie rozumiem dlaczego tekst umieszczony w <span> wyświetla się po prawej stronie tekstu zamiast pod spodem.

Czy ktoś wie dlaczego?

HTML

<div class="intro">
	
	<div class="half"> To tekst układający się normalnie <span class="purple">a to zamiast dalej pod tekstem to pojawia się na prawo od tekstu</span>.
		
	</div>
	
	<div class="half"><img src="akor.png">
	</div>

</div>

CSS

.intro
{
	width:1000px;
	height: 400px;
	display:flex;
	margin-right:auto;
	margin-left:auto;
}


.half
{

	display:flex;
	align-items:center;
	text-align:center;
	height: 100%;
	width:50%;
	font-size:2rem;

}

.purple
{
	color:green;
}

 

2 odpowiedzi

+2 głosów
odpowiedź 30 grudnia 2022 przez pablop76 VIP (123,180 p.)

Tak się zachowuje układ dla flexbox. Ustawia elementy w jednej linii.

.half
{
    display:flex;
    ...
}

 

komentarz 30 grudnia 2022 przez zbiku25 Gaduła (3,000 p.)
OK ale <span> również? Wydawało mi się że flexbox ustawia domyślnie elementy blokowe w lini.
W tym przypadku nawet jeżeli zamiast <span> wykorzystam <a> to tez traktuje to jako element blokowy a nie link…

czy to znaczy ze w przypadku flexbox nie mogę wstawiać w tekście linków?
komentarz 30 grudnia 2022 przez pablop76 VIP (123,180 p.)
"Flexbox to (oprócz opcjonalnego zawijania) koncepcja układu jednokierunkowego. Pomyśl o elementach elastycznych jako układających się głównie w poziome rzędy lub pionowe kolumny."

Nie ma znaczenia co jest w środku pojemnika elastycznego (flexbox)
komentarz 30 grudnia 2022 przez ScriptyChris Mędrzec (190,190 p.)

W tym przypadku nawet jeżeli zamiast <span> wykorzystam <a> to tez traktuje to jako element blokowy a nie link…

czy to znaczy ze w przypadku flexbox nie mogę wstawiać w tekście linków?

Na marginesie: gdy myślisz o użyciu danego znacznika HTML, powinieneś brać pod uwagę co sobą reprezentuje pod względem semantycznym, a nie to jak on się domyślnie układa na stronie, bo to możesz zmienić w CSS. HTML i CSS to są osobne warstwy strony i dobrze jest w ten sposób do nich podchodzić.

0 głosów
odpowiedź 30 grudnia 2022 przez VBService Ekspert (254,490 p.)
edycja 30 grudnia 2022 przez VBService

Zwróć uwagę na fakt, że inne "parametry" flex przyjmują swoje domyślne ustawienia i tak dla

display: flex;

jest

flex-direction: row;

 

dopisz do  [ on-line ]

.half
{ 
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    width: 50%;
    font-size: 2rem; 
}

 

Podobne pytania

0 głosów
1 odpowiedź 216 wizyt
pytanie zadane 28 października 2022 w HTML i CSS przez zbiku25 Gaduła (3,000 p.)
–1 głos
1 odpowiedź 99 wizyt
pytanie zadane 6 maja 2020 w HTML i CSS przez AdamKe Nowicjusz (200 p.)
0 głosów
1 odpowiedź 286 wizyt
pytanie zadane 19 lutego 2020 w HTML i CSS przez Hardwell Dyskutant (8,980 p.)

92,661 zapytań

141,554 odpowiedzi

319,995 komentarzy

62,028 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

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy 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!

...