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

Question

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

这样的事情可能吗？

非常感谢

Answer 1

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

它依赖于非 float 元素被推出 float 元素之外的事实，所以只要不 float 它，最后一个元素就会填满剩余的空间。

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;
}

编辑

我做了一些更改，通过 float anchor 使其在 IE6 上更流畅地工作。

如果其他人需要这个并且不需要支持 IE6 和更低版本，您可以去掉这两个属性。