All geek questions in one place

Why doesn't white-space nowrap affect LI in Internet Explorer?

I would like my entire LI to be displayed on one line, so I set each LI display property to an inline block and set white-space = nowrap on the parent UL. I get the expected shellless behavior in FireFox and Chrome, but IE8 ignores nowrap and displays the elements under another.

Any idea what I'm 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>
+4
source share
3 answers

If you want your items to appear next to each other, try removing the -block of your display property.

Define it as follows:

 display: inline;
+3
source

When using lists for menus:

  • Except float:left (for horizontal menus) never set LI style
  • Put all styles in tag A and use display:block

  • use reset for your list:

    .menu ul, .menu li {list-style: none; upholstery: 0; Margin: 0}

The HTML menu should look like this:

 <div class="menu"> <ul> <li> <a href="...">Menu 1</a> </li> ... </ul> </div>

See my tutorial, I like lists .

+2
source

doctype should also help. otherwise, you are working with IE in quirks mode. don't expect it to show your css correctly.

0
source

Source: https://habr.com/ru/post/1347554/

More articles:


All Articles