fejléc
Gyakori kérdések Belépés Új kérdés Véletlen kérdés
Keresés
Kezdőoldal » Számítástechnika » Weblapkészítés » Hogyan lehet a szavak köz nem...

Hogyan lehet a szavak köz nem fix közöket rakni, hanem flexibilisen egyenletesen beosztani a közöket a két szélével együtt?

Figyelt kérdés

Van egy ilyen elrendezésem:


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<style>

.container {

display: flex;

flex-wrap: wrap;

align-content: flex-start;

justify-content: center;

gap: 25px;

}

.word {

word-wrap: break-word;

text-align: center;

}

</style>

</head>

<body>

<div class="container" id="word-container"></div>

<script>

const words = ["SZÓ1", "KIFEJEZÉS2", "HARMADIK KIFEJEZÉS", "IDE IS VALAMI", "HOSSZÚSZÓ", "MÉGHOSSZABBSZÓ", "NAGYONHOSSZÚSZÓ", "ÉSEZIISNAGYONHOSSZÚSZÓ", "NAEZMÁR A VÉGE"];

const wordContainer = document.getElementById("word-container");

words.forEach(word => {

const wordElement = document.createElement("div");

wordElement.textContent = word;

wordElement.classList.add("word");

wordContainer.appendChild(wordElement);

});

</script>

</body>

</html>


De az a baj, hogy a szavak között fix 25px a köz. Én azt szeretném, ha a sor elejére és végére is tenne közt, pont annyit, mint a szavak közé, és egyeneletesen felosztaná a helyet minden sorban. Minden sorban nyilván más mennyiségű szó fér ki, de ezeket egyenletesen szórja szét. css-el ez nem megoldható?



#CSS #megjelenítés #eloszlás #Wrap
2023. ápr. 5. 00:02
 1/10 anonim ***** válasza:
Justify text-align és a divet igazítsd középre marginnal. A sorok elejére és végére nem értem milyen közöket akarsz, de talán a paddingra gondolsz... De igazából ez az egész alap szövegszerkesztés, semmi extra mágia nincs benne.
2023. ápr. 5. 03:04
Hasznos számodra ez a válasz?
 2/10 A kérdező kommentje:
Nem, ez nem jó. Legalábbis ilyen szimplán biztos nem. Azt szeretném, hogy van mondjuk 3 szó a sorban, akkor a sor elejével és végével és a szavak közötti résszel együtt összesen 5 köz van. Én ezeket egyformára szeretném. Amit te mondasz, az ebből a közbülső 3-at állítja egyformára, de a két szélére azt mondod, hogy fixen adjam meg. Fixen nem tudom megadni, se %-ban, mert ennek soronként változónak kéne lennie, attól függ, hogy hány és milyen hosszú szavak kerülnek a sorba! Amit lehetne, hogy a szavaknak van valami keretszerűség, de csak vízszintesen, nem függőlegesen, és annak a keretnek a felét még berakom a marginba is. De ezzel meg az a baj, hogy a keret fix lenne, és ha a sor úgy jön ki hogy 3 és fél szó fér ki így, akkor megint csak a szavak közé kerül az extra hely.
2023. ápr. 5. 08:02
 3/10 anonim ***** válasza:
Nincs ilyen.
2023. ápr. 5. 08:04
Hasznos számodra ez a válasz?
 4/10 anonim ***** válasza:
.container -nek padding: 0px 25px; max ennyi... szavak se fix hosszúak, és végén a távolság nem fixálható.
2023. ápr. 5. 09:09
Hasznos számodra ez a válasz?
 5/10 A kérdező kommentje:
Nincs ilyen? Ok, de minden megoldható! Azért ez nem olyan nagyon bonyolult kérés, elég mindennapos, hogyhogy nincs ilyen eleve?
2023. ápr. 5. 09:38
 6/10 anonim ***** válasza:

A .container -nek gap: unset; justify-content: space-around; -el nézd meg.

Ezzel a szavak távolságát eggyenletesen felosztja.

A .word -nek padding: 12.5px; ezzel tudod minimalizálni a távolságot.

Nem igazán értem mit szeretnél elérni, mi célja lenne ennek.

2023. ápr. 5. 09:51
Hasznos számodra ez a válasz?
 7/10 anonim ***** válasza:

<style>

* {

margin: 0px;

padding:0;

box-sizing: border-box;

}

.container {

display: flex;

flex-wrap: wrap;

justify-content: space-evenly;

gap: 25px;

padding-left:25px;

padding-right: 25px;

}

.word {

word-wrap: break-word;

text-align: center;

}

</style>

2023. ápr. 5. 17:29
Hasznos számodra ez a válasz?
 8/10 anonim ***** válasza:
Rajzold le, hogy mit akarsz, mert ennek így semmi értelme.
2023. ápr. 5. 17:58
Hasznos számodra ez a válasz?
 9/10 anonim ***** válasza:
Sorkizárt?
2023. ápr. 8. 10:10
Hasznos számodra ez a válasz?
 10/10 anonim ***** válasza:
akárhogy is számolom, 3 szó esetén csak 4 "köz"-t találok. hol van az 5.?
2023. máj. 16. 21:20
Hasznos számodra ez a válasz?

Kapcsolódó kérdések:

Számítástechnika főkategória kérdései »
Számítástechnika - Weblapkészítés kategória kérdései »




Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu

A weboldalon megjelenő anyagok nem minősülnek szerkesztői tartalomnak, előzetes ellenőrzésen nem esnek át, az üzemeltető véleményét nem tükrözik.
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!