Webprofis is een Forum waarin je vragen kunt stellen die webgerelateerd zijn. Heb je vragen over of problemen met je Webpagina, HTML, CSS, Javascript, PHP of andere client of serverside scriptingtalen? Stel ze dan gerust op dit forum. Op dit forum zijn een aantal vrijwilligers actief die u graag met uw vragen willen helpen en u waar mogelijk een passend antwoord aanbieden. Hebt u zelf veel ervaring en kennis met betrekking tot het bovenstaande? U bent van harte welkom om uw kennis met anderen te delen!

We hopen dat eenieder op dit Forum een leerzame ervaring mag opdoen.

Team Webprofis

Opgelost hoe een break te forceren met css

bewerkt zo 6 dec 2015 in Stylesheets Posts: 879
ik heb een lijstje waarin ik met css only een break wil forceren na elk li element;

<ul>
<li>foo1</li>
<li>foo2</li>
<li>foo3</li>
<li>foo4</li>
<li>foo5</li>
<li>foo6</li>
</ul>
De css:

li { display:inline; }
li:nth-child(2):after { content:"\A"; white-space:pre; }
li:nth-child(4):after { content:"\A"; white-space:pre; }

De output:

foo1 foo2
foo3 foo4
foo5 foo6
Dit werkt perfect.
Maar hoe krijg ik hetzelfde resultaat als dit mijn lijst is:

<dl>
<dt>foo1</dt>
<dd>foo2</dd>
<dt>foo3</dt>
<dd>foo4</dd>
<dt>foo5</dt>
<dd>foo6</dd>
</dl>
Na elke dd moet er een break plaatsvinden
De bedoeling is dat ik deze output krijg;

foo1 foo2
foo3 foo4
foo5 foo6
Elke dt en dd moeten naast elkaar ( vandaar display: inline) komen maar de volgende dt en dd moeten daaronder komen


Reacties

  • PMPosts: 732
    Na iedere tweede dt zet je er een dl sluiten en dl openen tussen.
    If it's not fun, you're not doing it right!
  • bewerkt ma 7 dec 2015
    PMPosts: 415

    <style>
    dd, dt{display:inline}
    dd::after { content:"\a"; white-space:pre; }
    </style>
    </head>
    <body>

    <dl>
    <dt>foo1</dt>
    <dd>foo2</dd>
    <dt>foo3</dt>
    <dd>foo4</dd>
    <dt>foo5</dt>
    <dd>foo6</dd>
    </dl>

    En voor je list in je voorbeeld had je de css ook met een regel kunnen doen:
    li:nth-child(even):after { content:"\A"; white-space:pre; }
    nuet
  • bewerkt di 8 dec 2015
    PMPosts: 879
    Idd , dit werkt goed
    het was natuurlijk stukken gemakkelijker geweest door er een

    <br />
    achter te zetten maar dit stukej staat in een core file en die worden regelmatig geupdate. Dan moet ik iedere keer weer die aanpassingen opnieuw maken in die core files. Vandaar dat ik zocht naar een css oplossing
Login of Registreer om te reageren.