如何创建顶部链接宽度可变的右对齐 suckerfish 菜单？
我创建了一个 Son of 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；但这似乎也有点奇怪。我希望有人有更好的主意！
I have created a Son of Suckerfish (http://htmldog.com/articles/suckerfish/dropdowns/) CSS-based nav menu. The left side is normal Suckerfish where the top-level nav entry is the same width of the drop-downs.
On the right side of my menu I have several small icons for things like help and options that also have drop-down menus. The problem is I need to right-align them so they do not go off the page, because the icons are narrow and floated right.
Word picture time :)
_______________________________________________________
| menu-item | menu-item | ____________| ? |
--------------------------------------| help item 1 |
| help item 2 |
| etc |
-----------------
What I did somewhat successfully was apply negative left margin to the inner that holds the drop-down entries:
#nav li ul { width: 10em; margin-left: -10em; }
There's one problem, it ends up too far left:
_______________________________________________________
| menu-item | menu-item | _________________| ? |
---------------------------------| help item 1 |-----
| help item 2 |
| etc |
-----------------
A simple solution would be to base my widths on px instead of em and reduce the negative left-margin by the width of my icon (16px), but that is hacky. It won't handle font zooming. Another trick I thought up would be to use margin-left:-9em; and make my icon element width:1em; but that seems a little wonky too. I'm hoping someone has a better idea!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
好吧，我为此整理了一个小提琴并找到了解决方案...请参阅我的小提琴 http://jsfiddle.net /cssguru/7JMkp/。没有时间在所有浏览器中进行验证。可能需要对 IE 进行一些调整。
Ok, I put together a fiddle for this and found a solution... See my fiddle http://jsfiddle.net/cssguru/7JMkp/. Didn't have time to verify in all browsers. Probably some IE tweaking needed.