Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

inline-block bryter rad ändå...

1
Skriv svar
Permalänk
Medlem ★
●

inline-block bryter rad ändå...

Exempel: https://codepen.io/hibou/pen/GRwWJMV

Jag fattar inte varför texten inte börjar intill rubriken i båda fallen eller hur man ska göra för att få den att göra det?
Nån som vet?

.rubrik, .text {
  display: inline-block;
  margin: 0;
}
<h1 class="rubrik">Rubrik</h1>
<p class="text">Den här korta texten flyter upp och börjar intill rubriken.</p>

</br>
<h1 class="rubrik">Rubrik</h1>
<p class="text">Men när texten blir längre än containerns bredd så hoppar hela p-elementet ner och börjar under rubriken. Hur kan man göra för att få första raden som det översta exemplet, men att den andra raden flyter in under rubriken??? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus cursus ligula, sit amet malesuada ipsum. Ut fermentum erat tellus, vitae consectetur massa imperdiet non. Cras sagittis ante eget ultrices commodo. Etiam vel lorem tincidunt, commodo mauris vitae, consequat mauris. </p>
Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av guermantes:

Exempel: https://codepen.io/hibou/pen/GRwWJMV

Jag fattar inte varför texten inte börjar intill rubriken i båda fallen eller hur man ska göra för att få den att göra det?
Nån som vet?

.rubrik, .text {
  display: inline-block;
  margin: 0;
}
<h1 class="rubrik">Rubrik</h1>
<p class="text">Den här korta texten flyter upp och börjar intill rubriken.</p>

</br>
<h1 class="rubrik">Rubrik</h1>
<p class="text">Men när texten blir längre än containerns bredd så hoppar hela p-elementet ner och börjar under rubriken. Hur kan man göra för att få första raden som det översta exemplet, men att den andra raden flyter in under rubriken??? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus cursus ligula, sit amet malesuada ipsum. Ut fermentum erat tellus, vitae consectetur massa imperdiet non. Cras sagittis ante eget ultrices commodo. Etiam vel lorem tincidunt, commodo mauris vitae, consequat mauris. </p>
Gå till inlägget

Jag testade att bara ha inline i stället för inline-block. Var det lösningen på ditt problem?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av guermantes:

Exempel: https://codepen.io/hibou/pen/GRwWJMV

Jag fattar inte varför texten inte börjar intill rubriken i båda fallen eller hur man ska göra för att få den att göra det?
Nån som vet?

.rubrik, .text {
  display: inline-block;
  margin: 0;
}
<h1 class="rubrik">Rubrik</h1>
<p class="text">Den här korta texten flyter upp och börjar intill rubriken.</p>

</br>
<h1 class="rubrik">Rubrik</h1>
<p class="text">Men när texten blir längre än containerns bredd så hoppar hela p-elementet ner och börjar under rubriken. Hur kan man göra för att få första raden som det översta exemplet, men att den andra raden flyter in under rubriken??? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus cursus ligula, sit amet malesuada ipsum. Ut fermentum erat tellus, vitae consectetur massa imperdiet non. Cras sagittis ante eget ultrices commodo. Etiam vel lorem tincidunt, commodo mauris vitae, consequat mauris. </p>
Gå till inlägget

Låter egentligen som att du vill att rubriken ska vara i paragrafen. Som nedan?

<p class="text"><h1 class="rubrik">Rubrik</h1> Men när texten blir längre än containerns bredd så hoppar hela p-elementet ner och börjar under rubriken. Hur kan man göra för att få första raden som det översta exemplet, men att den andra raden flyter in under rubriken??? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus cursus ligula, sit amet malesuada ipsum. Ut fermentum erat tellus, vitae consectetur massa imperdiet non. Cras sagittis ante eget ultrices commodo. Etiam vel lorem tincidunt, commodo mauris vitae, consequat mauris. </p>
Visa signatur

Ryzen 7 7800X3D | ASUS TUF Gaming B650-Plus WIFI | Kingston 32GB (2x16GB) DDR5 6GT/s CL30 FURY Beast | Kingston Fury Renegade M.2 NVMe SSD Gen 4 2TB | MSI RTX 4060 8GB | Fractal Design Define S | MSI MPG A850G 850W | Thermalright Phantom Spirit 120 SE | Windows 11 Pro | AOC 27" AGON AG276QZD2 OLED QHD 240 Hz

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Compared to display: inline , the major difference is that display: inline-block allows to set a width and height on the element. Also, with display: inline-block , the top and bottom margins/paddings are respected, but with display: inline they are not.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av guermantes:

Exempel: https://codepen.io/hibou/pen/GRwWJMV

Jag fattar inte varför texten inte börjar intill rubriken i båda fallen eller hur man ska göra för att få den att göra det?
Nån som vet?

.rubrik, .text {
  display: inline-block;
  margin: 0;
}
<h1 class="rubrik">Rubrik</h1>
<p class="text">Den här korta texten flyter upp och börjar intill rubriken.</p>

</br>
<h1 class="rubrik">Rubrik</h1>
<p class="text">Men när texten blir längre än containerns bredd så hoppar hela p-elementet ner och börjar under rubriken. Hur kan man göra för att få första raden som det översta exemplet, men att den andra raden flyter in under rubriken??? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus cursus ligula, sit amet malesuada ipsum. Ut fermentum erat tellus, vitae consectetur massa imperdiet non. Cras sagittis ante eget ultrices commodo. Etiam vel lorem tincidunt, commodo mauris vitae, consequat mauris. </p>
Gå till inlägget

Jag antar att du kör inline-block för du vill kunna applicera saker som padding och margin?

/*HTML */
<div>
<h1 class="rubrik">Rubrik</h1>
<p class="text">Men när texten blir längre än containerns bredd så hoppar hela p-elementet ner och börjar under rubriken. yfguyguiyguhiuhiuhiuhyghgiu yuyg uyg iuyhg uyuytfguytg g guy uyg yg uya a a a a a a a a a a a a a a a a a a a a a a  </p></div>
/*CSS*/
.rubrik, .text {
  display: inline-block;
  margin: 0;
  border: 1px solid black;
}
div { display: inline-block; padding: 0.5rem;}
.text { display: inline;}

Om du har en <div> som är inline-block och sedan är texten inline och sedan kör du padding på <div> så kan du få den att bryta rad och du får viss kontroll via padding. Jag har också border: 1px solid black; för att visa varför det blir som det blir. Du kan ta bort den raden och även piffa upp CSS-koden ytterligare!

Det är "olagligt" att ha en <h1-h6> inuti en <p> trots att det verkar renderas korrekt i webbläsaren. Men kanske renderas fel i vissa webbläsarversioner och skärmläsare får kanske läsordningssjuka?

Mvh,
WKL.

Visa signatur

(V)ulnerabilities
(I)n
(B)asically
(E)verything
Programming

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av telrad:

Jag testade att bara ha inline i stället för inline-block. Var det lösningen på ditt problem?

Gå till inlägget

Du, jag tror faktiskt att det var det. Tack!

Redigera
Citera flera Citera
1
Skriv svar