Menu
to me this is really weird, i have this menu:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.menu{text-align:right;}
div.menu ul{
list-style:none;
display:inline;
}
div.menu li{
position:relative;
display:inline;
background:#434343;
padding:8px 12px;
line-height: 32px;
margin:0;
border-left:1px #000 solid;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li></li>
<li> </li>
<li></li>
<li>Hi</li>
<li>Hello </li>
<li></li>
</ul>
</div>
</body>
</html>
i'm using the latest chrome and firefox 3.6 for testing
there are 6 li but only 5 are shown, a space inside the li causes it not to be rendered if there's a text inside it causes a 4px space
"hi" has a space after, "hello " doesn't
adding anchors inside the li causes the same behaviour
<li><a href="#">Link</a></li>
has a space after
<li><a href="#">Link</a> </li>
doesn't
adding div.menu li a:after{content:" ";} in the code would solve the problem apparently but if you look closely the elements will appear wider except the last one
any help?
thank you
332
asked Dec 03 '25 11:12
div.menu{text-align:right;}
div.menu ul{
float:right;
...
}
div.menu li{
float:left;
...
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
