iFrame 内に存在し、HTML ページに埋め込むことができる UI を作成しています。UI には、可変長の水平メニューが含まれています。次のように考えてください。
ホーム - ログイン - 概要 - ヘルプ
ただし、メニューの長さ/要素の数は変更される可能性があります。UIは、埋め込まれている各ページの右上にあります。私がやりたいのは、メニューに要素を追加するときです。たとえば、「お問い合わせ」としましょう。余分な要素に対応するために、iFrame を左に展開します。
現在、メニューは次のようにスタイルされた複数の div で構成されています
display: inline-block;
しかし、UL と LI を使用して試したこともあります。
これを複雑にしているのは、iFrame の幅をページ全体にしたくないということです。メニューを含めるのに十分な大きさにしたいだけです。しかし、新しい要素を追加するときに明示的に幅を設定しないと、横に並べる代わりに、次の行にプッシュされます。
したがって、新しい要素 (Contact Us) を追加すると、次のようになります。
Home - Login - About - Help - Contact Us
しかし、それは次のようになります
Home - Login - About - Help
- Contact Us
position: fixed;
(これはすべて、すべてのページの右上にある iFrame 内で行われていることに注意してください)
私が理解しようとしているのは、新しい要素を次の行に押し下げるのではなく、iFrame を左に拡張する方法です。前もって感謝します。