0

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

1つの問題があります、それはあまりにも左になってしまいます：

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

簡単な解決策は、幅をemではなくpxに基づいて、負の左マージンをアイコンの幅（16px）だけ減らすことですが、これはハッキーです。フォントのズームは処理されません。私が考えたもう1つのトリックは、margin-left：-9emを使用することです。アイコン要素の幅を1emにします。しかし、それも少し不安定に思えます。私は誰かがより良いアイデアを持っていることを望んでいます！

4

1 に答える 1

0

わかりました、私はこれにフィドルをまとめて解決策を見つけました...私のフィドルhttp://jsfiddle.net/cssguru/7JMkp/を参照してください。すべてのブラウザで検証する時間がありませんでした。おそらくIEの微調整が必​​要です。

于 2012-06-04T23:52:06.470 に答える