HTML / CSS：创建水平列表以强制li元素的宽度

Question

I have a horizontal list which is fine. The image is shown below. The list right under the header is the list im talking about. What I want to achieve is basically you see each links wording is all in one line, eg "Mash's Famous Wings" Well what im trying to do is create a fixed height and width (same for all) for all the li elements in the list. So this means that some of the words will go down into a new line.

See Smokey Bones Menu Sub Navigation as an example.

This is my CSS so far:

#menunavigation{
position:fixed;
top:100px;
left:50px;
z-index:1; 
color:white; 
}

#menunavigation a {
color:white; 
}


#menunavigation ul{
list-style-type:none;
height:50px;
}

#menunavigation ul li{
display:inline;
max-width:15px;
margin-right:5px; 
}

Answer 1

Try updating your css code with this snippet.

#menunavigation ul li
{
  display:inline-block;
  max-width:15px;
  margin-right:5px; 
}

however, display:inline-block will not work in IE-7, you need to include these extra lines, kind of hack which will work only in IE-7.

*display:inline;
*zoom:1;

or else if you are supporting IE-7 full time, you can detect it using contional comments.