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 添加是为您通过的每一个边框右边 1px。 containerNavigation 也应如此。

几乎没有什么要改变的。

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

ul 标签 ( class=shadow ) 的宽度是固定的。为 li a 标签去掉 15 px 的边距。那应该使他们正确地对齐以适合该部门。此外，joinCatchPhrase 有 100 像素的额外宽度。减少它一样。