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

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及以下版本,那么你可以摆脱这两个属性.