Question

我在此网址上有一个Hortizontal菜单 - http://www.balibar.co/main.php

我很满意，但我发现了两件事

它没有占据整个空间......最后有一点白色空间。
如果我更改屏幕尺寸（例如：按住Ctrl＆amp;使用鼠标滚轮更改屏幕尺寸），最后一个菜单项“搜索”会下降到下一个级别。

我如何解决这两件事。

以下是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的额外宽度为100px。同样减少它。

Answer 2

两点变化：

代表div#containerNavigation li a

width: 100%;

代表div#containerNavigation li

width: 116px;

Answer 3

有没有理由不使用桌子？这样你就可以保证永远不会有物品进入下一行的问题。

HTML水平菜单布局

3 个答案: