Display Text Inline

Limbaje de Programare HTML & CSS
1

Am tot cautat & incercat dar n-am reusit, am facut o linie verticala si dupa acea linie vreau sa scriu niste texte, sa fie centrate (de sus in jos), am reusit cu centrarea. Dar textul se afiseaza dedesubt in loc sa fie in line ca in cod atunci cand se depasesc mai multe caractere sau pun spatiu.

<p class="normal" style="float:left;padding:2px;color:white;">
	<font style="font-size:12px;"><font class="ld" style="font-size:8px;">ULTIMUL INREGISTRAT</font></br>
	<element style="position: relative;display: inline;float:right;border-left: 2px solid white;height: 260px;">
	  <span style="position: absolute;top: 50%;-ms-transform: translateY(-50%);transform: translateY(-50%);font-size:10px;">RP - 2/3</br>HOURS PLAYED: 2</span>
	</element>

	<img class="zoom" src="images/Skin_217.png" style="position: relative;height:260px;"><span style="position: absolute;left:100px;"><font class="ld" style="color:white;">2 <font style="font-family:Arial;font-size:10px;">Lv</font></font></span></img></br>
	<i class="fa fa-certificate" style="color:red;"></i> Spokerino</br>
	<i class="fa fa-clock-o"></i> 2019-09-24 16:09:57</br>
	<a href="https://rpg.linkmania.ro/user/profile/Spoker/" style="color:#1AB0EB;" target="_blank"><i class="fa fa-external-link"></i> Panel Profile</a></font>
</p>

Untitled
Untitled.png700×373 35 KB

Daca nu mai folosesc spatiu nu se mai “duce” dedesubt, ex: Untitled2

2

Am rezolvat problema.
Rezolvat cu: white-space: nowrap;

3

de ce ai incapsula intr-un element < p > alte elemente precum img, i-uri, a-uri ?

4

Pentru ca sunt inca un incepator, daca mi-ai putea explica exact cum ar trebui sa fie sau sa fac m-as bucura si te-as aprecia.
Multumesc.

1 Like
5

@Ekors: kudos pentru încăpățânare. Eu la fel am învățat CSS: încercări multiple și multă răbdare. Continuă :slight_smile:

Acum, două sugestii:

  1. Evită style inline (e.g. style="float:left;padding:2px;color:white;") și mută totul într-un fișier extern CSS
  2. Ce vrei tu se rezolvă cu display: flex și align-items: center. Te las pe tine să-ți dai seama ce și cum :wink:
1 Like
6

p - paragraph - are scopul lui atunci cand il folosim, dupa cum sugereaza si numele. Pe langa asta are si proprietati default de CSS (te las pe tine sa le cauti sa sa intelegi).
Daca vrem sa incapsulam mai multe elemente, putem folosi < div> uri. Scopul lor a fost exact asta, de a incapsula alte elemente HTML pentru a putea structura mai bine documentul.

L.E. - dupa ce citesti despre flexbox(cum ti-a sugerat @iamntz) poti sa te joci cu https://flexboxfroggy.com/