Claudia: Inline-Elementen vertikalen Abstand geben

Hallo zusammen,

ich habe folgendes Problem: Ich möchte mehrere Elemente (die als Button genutzt werden) nebeneinander plazieren, mit Hilfe von <div style="display: inline">
Nun sieht auch alles super aus, nur im Browser springt ein Element in die nächste Zeile, weil der Platz nicht ausreicht. Dieses Element in der nächsten Zeile rutscht auf das erste in der oberen Zeile (sie schieben sich übereinander). Ich weiß, dass man bei inline-Elementen nicht mit margin arbeiten kann, aber was kann ich machen, um einen Abstand zwischen dem umgesprungenen Element und dem ersten zu bekommen?

Danke für eure Hilfe!

  1. Tag.

    <div style="display: inline">

    Hat es einen bestimmten Grund, dass du <div> mit display:inline benutzt anstatt gleich <span>?

    Nun sieht auch alles super aus, nur im Browser springt ein Element in die nächste Zeile, weil der Platz nicht ausreicht. Dieses Element in der nächsten Zeile rutscht auf das erste in der oberen Zeile (sie schieben sich übereinander).

    Falls sie sich wirklich überlagern, muss da noch irgendwas anderes im Spiel sein. An display:inline kann das nicht liegen, solche Elemente überlagern sich nicht, sie werden wie Wörter brav nacheinander und Zeile für Zeile auf den Schirm geklebt.

    Ich weiß, dass man bei inline-Elementen nicht mit margin arbeiten kann, aber was kann ich machen, um einen Abstand zwischen dem umgesprungenen Element und dem ersten zu bekommen?

    padding funktioniert bei inline-Elementen. Das scheint in deinem Fall aber nur das Beheben des Symptoms zu sein, nicht der Ursache, siehe oben.

    1. @@Franka:

      nuqneH

      Tag.

      Element.

      <div style="display: inline">

      Hat es einen bestimmten Grund, dass du <div> mit display:inline benutzt anstatt gleich <span>?

      Nö, div passt schon.

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  2. Hi,

    Ich weiß, dass man bei inline-Elementen nicht mit margin arbeiten kann, aber was kann ich machen, um einen Abstand zwischen dem umgesprungenen Element und dem ersten zu bekommen?

    Nicht inline, sondern inline-block nehmen.

    MfG ChrisB

    --
    Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/
    1. Ha! Inline-Block war die Lösung!! Super, vielen vielen Dank Chris!!

      Hi,

      Ich weiß, dass man bei inline-Elementen nicht mit margin arbeiten kann, aber was kann ich machen, um einen Abstand zwischen dem umgesprungenen Element und dem ersten zu bekommen?

      Nicht inline, sondern inline-block nehmen.

      MfG ChrisB

  3. Hi,

    ich habe folgendes Problem: Ich möchte mehrere Elemente (die als Button genutzt werden) nebeneinander plazieren, mit Hilfe von <div style="display: inline">

    Wozu aber div? Wenn Du Buttons haben willst, dann nimm button-Elemente.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    O o ostern ...
    Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.