Wie kann ich vermeiden, dass die Zeilenumbrüche VOR ODER NACH einem element?

Habe ich eine definition list. Meine <dt> und <dd> sind in CSS als display: inline-block;. Und ich möchte vermeiden, Zeilenumbruch vor der <dd> element und nach der <dt> element. Wie kann ich es tun?

Meine Liste sieht wie folgt aus, mit einem Zeilenumbruch nach term3:

term1: def1; term2: def2; term3:

def3;

Ich soll es wie folgt Aussehen (der Zeilenumbruch erscheinen soll, bevor term3:

term1: def1; term2: def2;
term3: def3;

InformationsquelleAutor Almino Melo | 2011-01-13
  1. 3

    Einzelne Spalte (Gültiges HTML):

    <style type="text/css">
    dt, dd { display: inline-block; float: left; }
    dt { clear: left; }
</style>

<dl>
    <dt>term1</dt><dd>def1</dd>
    <dt>term2</dt><dd>def2</dd>
    <dt>term3</dt><dd>def3</dd>
</dl>

    No-Wrap <span> (Ungültiges HTML):

    <style type="text/css">
    dt, dd { display: inline-block; }
    span { white-space: nowrap; }
</style>

<dl>
    <span><dt>term1</dt><dd>def1</dd></span>
    <span><dt>term2</dt><dd>def2</dd></span>
    <span><dt>term3</dt><dd>def3</dd></span>
</dl>
    • Mit span erlischt die html, wie meine Lösung mit div.
    • Ja, ich habe " meine Lösung als Ungültiges HTML. Der große Unterschied zwischen Ihrer Implementierung und meine, ist, dass ich nicht verwenden float:left; auf der Verpackung Elemente. 🙂
    • Es hat nicht funktioniert, wie ich wollte. Es ist immer zu brechen, nachdem <dd>. Ich wollte, dass er sich benehmen wie ein Vielfaches <span style="white-space: nowrap;"> in einer Zeile.
    • Die erste Lösung ist falsch und der zweite scheint nicht optimal - ich will nicht wickeln Sie jeden Einsatz in einem <span>.
    • BTW, ist es nicht sinnvoll display: inline-block; float: left; verursachen float: left; ändert sich der berechnete Wert der display-Wert auf display: block;
    InformationsquelleAutor drudge
  2. 1

    Bei mir funktionierte es nur durch die Angabe der dt und dd auf der gleichen Linie zusammen mit inline Anzeige der Art, wie diese:

    <style type="text/css">
    dt, dd { display: inline; }
</style>

<dl>
    <dt>term1</dt><dd>def1</dd>
    <dt>term2</dt><dd>def2</dd>
    <dt>term3</dt><dd>def3</dd>
</dl>

    anstelle von dem, was ich früher hatte:

    <style type="text/css">
    dt, dd { display: inline; }
</style>

<dl>
    <dt>term1
    <dd>def1
    <dt>term2
    <dd>def2
    <dt>term3
    <dd>def3
</dl>

    scheinen gut zu funktionieren, wenn Sie dynamisch die Größe des browser-Fensters, die ich niemals sehen, es brechen zwischen den dt und dd nur zwischen dd und dt.

    InformationsquelleAutor Zitrax
  3. 0

    Nur so kann ich mir vorstellen, dies zu tun ist, um die Breite für jedes der Elemente, es gibt also eine vorhersehbare break-Punkt auf jeder Linie.

    InformationsquelleAutor Jeff
Schreibe einen Kommentar