nicht angemeldet
Abstand zwischen Horizontalen <li> mit display:inline;
Gunnar BittersmannGuten Tag!
Zwischen Listen-Elementen welche durch display:inline; horizontal
ausgerichtet werden, findet sich ein Abstand, welcher für mich
nicht erklärbar ist.
Alle erdenklichen Ursachen wurden schon auf "0" bzw. "none" gesetzt.
Fehlerbeschreibung: Nach jedem <li> Element entsteht offensichtlich
ein Abstand von ca. 2px Breite, der den Hintergrund
des <ul> durchscheinen lässt.
Getestet mit: Iceweasel (Firefox) 3.0.6
Konqueror 3.5.9
Bitte _nicht_ display:block; float:left;
empfehlen, da die einzelnen <li> Elemente dynamisch die
Breite des beinhalteten Textes annehmen sollen.
Danke!
Blendi
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="styles.css">
<style type="text/css">
<!--
html
{
margin:0px;
padding:0px;
}
body
{
font-family:arial;
font-size:10pt;
margin:0px;
padding:0px;
background-color:lightgreen;
}
.ul_main
{
text-align:left;
border-width:0px;
border-style:none;
padding:0px;
margin:0px;
background-color:red;
}
.ul_main li
{
display:inline;
border-width:0px;
border-style:none;
padding:0px;
margin:0px;
background-color:blue;
list-style-type:none;
text-indent:0px;
white-space:nowrap;
}
-->
</style>
</head>
<body>
<ul class="ul_main">
<li><a href="#">aaa</a></li>
<li><a href="#">bbb</a></li>
<li><a href="#">ccc</a></li>
<li><a href="#">ddd</a></li>
<li><a href="#">eee</a></li>
<li><a href="#">fff</a></li>
<li><a href="#">ggg</a></li>
<li><a href="#">hhh</a></li>
<li><a href="#">iii</a></li>
</ul>
</body>
</html>
-
<ul class="ul_main">
<li><a href="#">aaa</a></li>
<li><a href="#">bbb</a></li>
<li><a href="#">ccc</a></li>
<li><a href="#">ddd</a></li>
<li><a href="#">eee</a></li>
<li><a href="#">fff</a></li>
<li><a href="#">ggg</a></li>
<li><a href="#">hhh</a></li>
<li><a href="#">iii</a></li>
</ul>Mahlzeit,
also bei mir sind sie weg wenn ich es wie folgt notiere:
<li><a href="#">aaa</a></li><li><a href="#">bbb</a></li><li><a href="#">ccc</a></li><li><a href="#">ddd</a></li><li><a href="#">eee</a></li><li><a href="#">fff</a></li><li><a href="#">ggg</a></li><li><a href="#">hhh</a></li><li><a href="#">iii</a></li>
-
also bei mir sind sie weg wenn ich es wie folgt notiere:
<li><a href="#">aaa</a></li><li><a href="#">bbb</a></li><li><a href="#">ccc</a></li><li><a href="#">ddd</a></li><li><a href="#">eee</a></li><li><a href="#">fff</a></li><li><a href="#">ggg</a></li><li><a href="#">hhh</a></li><li><a href="#">iii</a></li>
Muss ja auch so sein, da ja "ein" (bzw. mehr, werden jedoch nur als eines dargestellt) Leerzeichen vorhanden sind.
MfG
Simon -
<ul class="ul_main"
<li><a href="#">aaa</a></li
<li><a href="#">bbb</a></li
<li><a href="#">ccc</a></li
</ul>sieht besser aus.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
@@Beat:
nuqneH
<ul class="ul_main"
<li><a href="#">aaa</a></li
<li><a href="#">bbb</a></li
<li><a href="#">ccc</a></li
</ul>sieht besser aus.
Auch nicht wirklich.
Wenn die Schrigtgröße nicht relativ zu der des Elternelement angegeben wird (was man aber tun sollte), könnte man das Gewünschte errerichen mit vernünftig formatiertem Quelltext und
ul { font-size: 0 } li { font-size: 42px }Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)-
Wenn die Schrigtgröße nicht relativ zu der des Elternelement angegeben wird (was man aber tun sollte), könnte man das Gewünschte errerichen mit vernünftig formatiertem Quelltext und
ul { font-size: 0 }
li { font-size: 42px }
Nein. Mein Browser kennt kein font-size:0; mfg Beat -- ><o(((°> ><o(((°> <°)))o>< ><o(((°>o Der Valigator leibt diese Fische-
@@Beat:
nuqneH
ul { font-size: 0 }
li { font-size: 42px }
> > Nein. Mein Browser kennt kein font-size:0; Guter Punkt. Hab aber nochwas [anderes](https://forum.selfhtml.org/?t=192706&m=1286386) gefunden. Heureka? Qapla' -- Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
-
-
@@Gunnar Bittersmann:
nuqneH
Wenn die Schrigtgröße nicht relativ zu der des Elternelement angegeben wird (was man aber tun sollte)
Eben. Aber wir können auch anders:
ul { word-spacing: -1em } li { word-spacing: normal }Das setzt voraus, dass ein Leerzeichen 1em breit ist. Funktioniert in Firefox und Opera.
Safari schiebt zu weit nach links.
Verdächtig finde ich dabei auch, dass in CSS 2.1 „_in addition_ to the default space“ heißt [CSS21 §16.4], während ich dies in 3.0 nicht mehr herauslese [CSS3-TEXT §7.1].
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
-
-
-