Home/ Questions/Q 7401261
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T04:25:07+00:00

to me this is really weird, i have this menu: <!DOCTYPE html> <html> <head>

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
        div.menu{text-align:right;}
    div.menu ul{
        float:right;
...
    }
    div.menu li{
        float:left;
...
    }
    • 0