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-s开发者_开发技巧pace = 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>
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;
When using lists for menus:
- Other than
float:left(for horizontal menus) never put any styling on the LI - Put all styles on the A tag and use
display:block use a reset for your list:
.menu ul, .menu li { list-style:none; padding:0; margin:0 }
Menu HTML should look like this:
<div class="menu">
<ul>
<li>
<a href="...">Menu 1</a>
</li>
...
</ul>
</div>
See my tutorial, I love lists.
a doctype should also help. otherwise you are working with IE in quirks mode. don't expect it to show your css correctly then.
![Interactive visualization of a graph in python [closed]](https://www.devze.com/res/2023/04-10/09/92d32fe8c0d22fb96bd6f6e8b7d1f457.gif)
加载中,请稍侯......
精彩评论