Home/ Questions/Q 4256988
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T05:25:47+00:00

I would like all my LI’s to display on the same line, so I

  • 0

I would like all my LI’s to display on the same line, so I set each LI’s display property to inline-block and set white-space = nowrap on the parent UL. I get the expected non-wrapping behaviour in FireFox and Chrome, but IE8 ignores the nowrap and displays the items on underneath the other.

Any idea what I am doing wrong?

Here is the HTML and CSS…

<html>
    <head>
        <style type="text/css"> 
            li
            {
                display: inline-block;
                list-style: none outside none;
                padding: 0px 10px 0px 10px;
                white-space: nowrap;
            }
            ul
            {
                white-space: nowrap;
            }
        </style>
    </head>
    <body>
        <div style="float: left; width: 300px;">
            <ul>
                <li>
                    Menu 1
                </li>
                <li>
                    Menu Menu Menu 2
                </li>
                <li>
                    Menu 3
                </li>
                <li>
                    Menu 4
                </li>
            </ul>
        </div>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you want your elements to display one next to the other, try removing the -block of your display property.

    Set it as follow : 

    display: inline;
    • 0