HTML水平菜单布局

Question

我有一个水平菜单在这个URL - http://www.balibar.co/main.php

我对这个外观很满意，但我发现了两件事

1. 它不占用整个空间…
2. 如果我改变屏幕大小(例如:按住Ctrl &使用鼠标滚轮改变屏幕大小)最后一个菜单项"搜索"下降到下一个级别。

如何解决这两个问题?

下面是HTML代码:

  <div id="containerNavigation">
            <ul>
                <li><a id="headerLoginLink">Home</a></li>
                <li><a id="headerLanguageLink">Profile</a></li>
                <li><a id="headerSearchLink">Mail</a></li>
                <li><a id="headerSearchLink">Requests</a></li>
                <li><a id="headerSearchLink">Matches</a></li>
                <li><a id="headerSearchLink">Search</a></li>            
            </ul>
  </div>

这里是CSS

 div#containerNavigation {
width: 700px;
height: 25px;
float: left;
 }
 div#containerNavigation ul {
list-style: none;
color: #FFF;
 }
 div#containerNavigation li {
background: white url(../images/online-dating-main/navigation5.png) repeat-x 0 0;
display: inline;
line-height: 25px;
font-size: 1.1em;
float: left;
 }
 div#containerNavigation li a {
cursor: pointer;
font-weight: normal;
float: left;
width: 116px;
text-decoration: none;
color: white;
border-right: 1px solid #FFF;
text-align: center;
 }
 div#containerNavigation li a:hover {
background-color: #849C00;
 }

谢谢!

Answer 1

div#containerBody的宽度应为702px。它小于2px，这是它掉下来的原因(116 * 6 + 6 = 702)。6 add是为每个你通过的边框右1px。对于containerNavigation也是一样的。

需要改变的地方很少。

div#joinHeader li a {
    cursor: pointer;
    margin: 0 15px;
}

你有固定的宽度为ul标签(class=shadow)。为li a标签去掉15像素的边距。这样就能使它们正确地对齐以适应除法。另外，joinCatchPhrase的额外宽度为100px。减少同样的量。

Answer 2

两个小改动:

为div#containerNavigation li a

width: 100%;

为div#containerNavigation li

width: 116px;

Answer 3

有什么理由不使用表吗?这样你就可以保证永远不会出现一个项目转到下一行的问题。