Question

我创建了一个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），但这很麻烦。它不会处理字体缩放。我想到的另一个技巧是使用margin-left：-9em;并使我的图标元素宽度：1em;但这似乎有点不稳定。我希望有人有更好的主意！

Answer 1

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

如何创建一个右对齐的suckerfish菜单，其中top link是可变宽度的？

1 个答案: