CSS菜单右对齐问题答案

【问题标题】：CSS menu right alignment issueCSS菜单右对齐问题
【发布时间】：2012-07-20 17:55:01
【问题描述】：

我的网站出现问题 (http://goo.gl/Di4jX) 问题：我无法使菜单向右对齐（距页面右侧 2%）。 “我试过浮动：对”但是当我这样做时，菜单项的顺序错误。有没有办法来解决这个问题？非常感谢您的帮助格雷格

【问题讨论】：

将 'float: right' 放在 #nav 元素上，并删除 'width' :)
事实上它在没有浮动的情况下也可以工作，但由于它在一个非常宽的盒子中左对齐，它永远无法到达最右边
感谢 Neograph。我尝试了您的解决方案（您可以在此地址 http://goo.gl/KwP9I 看到结果）但问题是现在我的菜单显示为垂直而不是水平。有什么想法吗？
在我的浏览器中看起来不错，但是你必须设置一个宽度。由于菜单条目的宽度始终相同，因此您可以以像素为单位进行指定。大约 520px 应该没问题。
谢谢，我指定了一个宽度，现在它在 safari 和 firefox 上看起来都不错 - 很多

【解决方案1】：

它适用于这个：

#nav {
    right: 2%;
    list-style: none;
    position: fixed;
    /* float: left; useless with position fixed*/
    top: 30px;
    /* width: 50%; */
}

#nav > li {
    display: inline-block;
    /* dirty hack for IE7 */
    *display: inline;
    *zoom: 1;
}

【讨论】：

哇，效果很好，非常感谢！我以前从未见过#nav > li，你介意给我一些关于这段代码背后的理性的额外信息吗？再次感谢！
> 运算符表示直接子级，因此它将样式设置为 <li>s 和直接#nav 父级。在这种情况下它不是很有用，但我更喜欢我的选择器是具体的，写#nav li 对我来说是粗略的，#nav 中的所有<li>s 都会造成麻烦，主要是嵌套菜单。无论如何，此代码仅适用于 IE7+。

【解决方案2】：

你可以简单地通过减少容器的右边或减少那个ul的宽度来实现它

例如 css:-

#nav {
    float: right;
    list-style: none outside none;
    position: fixed;
    right: 2%;
    top: 30px;
    width: 43%;
}

或

#nav {
    float: right;
    list-style: none outside none;
    position: fixed;
    right: -5%;
    top: 30px;
    width: 50%;
}

如果您可以接受，请应用这些样式。

【讨论】：

谢谢萨蒂亚。我想这会起作用，但每次添加/删除菜单项时都需要调整宽度，对吧？ Neograph 的解决方案似乎更具可扩展性。感谢您的帮助
你是对的。另一个技巧是反转菜单项的顺序并将它们向左浮动。则无需更改任何 CSS，您可以在需要时添加或删除菜单项，而无需更改任何样式
浮动顺序问题是因为先浮动的元素会先浮动，剩下的会跟随它。
Tks Satya，终于解决了！