• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Abstände zwischen Inlineelementen

Status
Für weitere Antworten geschlossen.
J

Junny

Neues Mitglied
Hallo,

ich lasse Listeneinträge einer ungeordneten Liste wie Inlineelemente darstellen. Darin enthaltenen Links gebe ich
Code: 
display: inline-block;
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Testseite</title>
<style type="text/css">
<!--
* {
    margin: 0;
    padding: 0;
}
ul#testliste {
    display: block;
    text-align: right;
}
    ul#testliste li {
        display: inline;
        /* margin-right: -0.3em; /* Dies wuerde Abstand auf 0 setzen */
        border: 1px solid #FF0000;
    }
        ul#testliste li a {
            display: inline-block;
            background-color: #CCCCCC;
        }
-->
</style>
</head>
<body>
<ul id="testliste">
  <li><a href="index.html">Testlink</a></li>
  <li><a href="index.html">Testlink</a></li>
  <li><a href="index.html">Testlink</a></li>
</ul>
</body>
</html>
Jetzt haben die Listeneinträge zueinander Abstände von 0,3em.
Wie kriege ich die Abstände zwischen den Listeneinträgen am sichersten auf 0?

Inline-Abstände

Gruß
Junny
 
Werbung:
Die Leerzeichen bzw. Zeilenumbrüche entfernen oder auskommentieren:
Code: 
<ul id="testliste">
  <li><a href="index.html">Testlink</a></li><!--
  --><li><a href="index.html">Testlink</a></li><!--
  --><li><a href="index.html">Testlink</a></li>
</ul>

ff2 kennt display:inline-block nicht.
Du könntest mit display: -moz-inline-box experimentieren (ist aber nicht das selbe)

IE7 kennt display:inline-block nur als haslayout-trigger für inline-Elemente (ist auch nicht das selbe aber funktioniert besser wie inline-box für ff2)

In deinem Beispiel würde ich lieber floaten. Inline-block braucht man nur für ungleich hohe, mehrzeilige Boxen.
Und auch das nur wenn die Zeilen umbrechen sollen. Ohne Umbruch kann man ähnliches auch mit display: table / table-row / table-cell erreichen.

Ich habe schon Stunden mit -moz-inline-box für ff2 verbracht. Ob sich der Aufwand lohnt?
 
Zuletzt bearbeitet:
Vielen Dank für den hilfreichen Tipp bezüglich der Freiräume!
Das ist ja sonst so, als ob man ein Wort mit Leerzeichen zwischen den Buchstaben schreibt und krampfhaft probiert, word-spacing mit CSS auf 0 zu setzen, um es wieder als ein Wort anzuzeigen :-D.

Zu der inline-block-Problematik:
Das war mal echt ein guter Tipp: Ich floate jetzt ul rechts sowie li und a links (alles als Blockelement dargestellt). Habe es nicht von Anfang an so gemacht, weil ich erwartet hätte, dass jetzt alle Links am rechten Rand kleben, weil die floatende Liste alles umschließt.
Eine interessante Erkenntniss, dass bei verschachtelten floatenden Blockelementen zuerst die inneren und dann die äußeren ihre Position bekommen.

Für alle zum anschauen: Inline-Abstände
Hier ein Screenshot im Firefox 2 der inline-Block-Variante (geht zwar, aber ist mir dennoch nicht ganz geheuer): http://html-hilfe.julius-rapp.de/inline-abstand/firefox-2.png

Gruß
Junny
 
Werbung:
In deinem Beispiel sieht es nur so aus als ob ff2 auf display:inline-block; reagiert. In Wirklichkeit ignoriert er es. <a> wird ganz normal als inline-Element dargestellt. Für die anderen Browser macht es keinen Unterschied ob die einzeiler display:inline-block oder display: inline erhalten.

Einen Unterschied siehst du z.B. wenn die Boxen mehrzeilig werden.
display: inline-block mit fester Breite und variabler Höhe:
Code: 
...
...
div {
min-width: 20em;
border: 15px solid #3A3A3A;
}

  ul {
background-color: #B01102;

text-align: right;
margin: 0;
padding: 0;
}

ul li {
display: -moz-inline-box;
display: inline-block;
vertical-align: middle;
text-align: left;
width: 10em;
padding: 1em;
margin: 1px;
background-color: #FF8000;
}
...
...
<div>
<ul>
<li>
<h2>Block 1</h2>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</li><!--
--><li>
<h2>Block 2</h2>
Lorem ipsum dolor sit amet,
</li><!--
--><li>
<h2>Block 3</h2>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</li><!--
--><li>
<h2>Block 4</h2>
Lorem
</li><!--
--><li>
<h2>Block 5</h2>
Lorem
</li>
</ul>
</div>
...
...

So sollte es aussehen (ff3, opera9.2, safari3 usw.)
inline-block-opera.png


So sieht e im ff2 mit -moz-inline-box aus:
moz-inline-box.png


IE ab 5.0(win) stellt die Box mit display:inline; als inline-Block dar wenn sie Layout hat.
(IE8 kennt display: inline-block.)
Code: 
  <!--[if lt IE 8]>
<style type="text/css">
ul li {
display: inline;
}
</style>
  <![endif]-->
Hier in IE 5.0
inline-block-ie.png
 
Gut zu wissen.

Zum Glück ließ sich mein Problem auch nach Deinem Tipp mit floatenden Blockelementen lösen.

Gruß
Junny
 
Trotzdem ärgerlich das der ff2 (und darunter) display-inline-block nicht kennt.

Auch wenn ich abschweife.
Der Vollständigkeit wegen noch mal ein möglicher Lösungsansatz für -moz-inline-box (bis ff2) aus meinem Beispiel.

Den Inhalt der inline-block-Box noch einmal mit einem block-Element umschließen und dem ein width geben:
Code: 
...
...
ul li .ff2 {
width: 10em;
}
...
...
<li>
[COLOR="DarkRed"][B]<div class="ff2">[/B][/COLOR]
<h2>Block 2</h2>
Lorem ipsum dolor sit amet,
[COLOR="DarkRed"][B]</div>[/B][/COLOR]
</li>
...
...
ff2:
inline-block-ff2.png

Das löst noch lange nicht alle Probleme mit display: inline-block im ff2.
Aber das "Überlaufen" ist damit vorerst gelöst.
Andere Browser stört es nicht.

Nachtrag:
Diese Beispiele sind nicht geeignet um Inhalte pixelgenau, vertikal auf background-images zu zentrieren.
 
Zuletzt bearbeitet:
Werbung:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben