0

我创建了一个 Suckerfish 之子 (http://htmldog.com/articles/suckerfish/dropdowns/) 基于 CSS 的导航菜单。左侧是普通的 Suckerfish，其中顶级导航条目与下拉菜单的宽度相同。

在我的菜单的右侧，我有几个小图标，用于显示帮助和选项等内容，这些图标也有下拉菜单。问题是我需要将它们右对齐，这样它们就不会离开页面，因为图标很窄并且向右浮动。

文字图片时间：）

_______________________________________________________
| menu-item    | menu-item    |       ____________| ? |
--------------------------------------| help item 1   |
                                      | help item 2   |
                                      | etc           |
                                      -----------------

我做的比较成功的是对包含下拉条目的内部应用负左边距：

#nav li ul { width: 10em; margin-left: -10em; }

有一个问题，它最终离得太远了：

_______________________________________________________
| menu-item    | menu-item    |  _________________| ? |
---------------------------------| help item 1   |-----
                                 | help item 2   |
                                 | etc           |
                                 -----------------

一个简单的解决方案是将我的宽度基于 px 而不是 em 并将负左边距减少我的图标的宽度（16px），但这很hacky。它不会处理字体缩放。我想到的另一个技巧是使用 margin-left:-9em; 并使我的图标元素宽度：1em；但这似乎也有点不稳定。我希望有人有更好的主意！

4

1 回答 1

0

好的，我为此整理了一个小提琴并找到了解决方案......请参阅我的小提琴http://jsfiddle.net/cssguru/7JMkp/。没有时间在所有浏览器中进行验证。可能需要一些 IE 调整。

于 2012-06-04T23:52:06.470 回答