如何将最后一个菜单项自动粘贴到右上角？

Question

我正在尝试创建一个菜单，其中最后一个菜单项（具有不同的类）将自动粘贴到菜单的右上角。我正在附上截图。左边有几个菜单项，最后一个项目应该以某种方式计算菜单div右侧的剩余可用空间，将此空间添加为右边的填充，并在整个区域中显示背景ON HOVER（参见屏幕要理解这一点）

这样的事情可能吗？

非常感谢

Answer 1

看看这是否适合您：http://jsfiddle.net/neSxe/2

它依赖于非浮动元素被推出浮动元素的事实，因此通过简单地不浮动它，最后一个元素填充其余空间。

<强> HTML

<ul id="menu">
    <li><a href="#">Services</a></li>
    <li><a href="#">Doctors</a></li>
    <li><a href="#">Hospitals</a></li>
    <li><a href="#">Roasted Chicken</a></li>
    <li class="last"><a href="#">Customer Service</a></li>
</ul>

<强> CSS

#menu {
    width: 600px;
}
#menu li {
    float: left;
}
#menu li a {
    display: block;
    padding: 6px 14px 7px;
    color: #fefefe;
    background-color: #333;
    float: left;
}
#menu li a:hover {
    background-color: #666;
}
#menu li.last {
    float: none;
}
#menu li.last a {
    text-align: center;
    float: none;
}

修改

我做了一些更改，以便通过浮动锚点使IE6上的工作更顺畅。

如果其他人需要这个并且不需要支持IE6及以下版本，那么你可以摆脱这两个属性。

Answer 2

假设你的html看起来像这样：

<div id="menu">
 <div class="entry">Services</div>
 ...
 <div class="entry last">Support Staff</div>
</div>

我会设置#menu位置：relative;，这样你就可以将最后一个菜单项绝对放在#menu div中。

Answer 3

不一定要把菜单项放在最后，但是如果你总是想要最后一个圆角，那么你可以将背景图像应用到ul本身并将右上角放在曲线上。您使用此方法遇到的唯一问题是，如果您将鼠标悬停在最后一个菜单上，则不会将鼠标悬停在右侧边缘。

如果您知道有多少菜单项可以通过为所有菜单项设置正确的宽度来实现这一目的？

Answer 4

看看这个：

http://jsfiddle.net/ExLdQ/

诀窍是使用浅绿色作为整个列表的背景或背景图像。您可以在所有li上使用较深的绿色，并将background-color:transparent添加到li.last。

Answer 5

只需将float: right;添加到最后一个菜单项的css中，并为列表本身和最后一个菜单项使用浅色背景。