2

私はレスポンシブ サイト デザインを使用していますが、そのほとんどは問題なく機能します。

チェックアウトページには、選択した国の選択要素があります。オプションの中には、「コンゴ民主共和国」のように非常に長いものもあります。これにより、レイアウトが右に押し出され、レイアウトが壊れてレイアウトが水平にスクロールします-これは恐ろしいことです;)

選択を完全に削除すると、レイアウトは正常に表示されます。また、すべてのオプションを削除して短いテストをその場所に配置すると、正常に動作します。だから私はそれが問題である長いOptionだと確信しています。Select 自体は幅が 50% しかないため、画面からはみ出ることはありません (「見えない」オプション要素です)。

ここに一時的なリンクがあります: http://moymadethis.com/oca/test.html

デスクトップでは問題なく動作しますが、問題は iPhone モバイル (サファリ、クローム、オペラ) にあります。

ありがとう、誰かがこれに対する解決策に光を当ててくれることを願っていますか? スティーブ

4

3 に答える 3

1

通常、要素自体に幅を設定するだけで十分selectです (親に幅を設定するのとは対照的に、内部要素は必要に応じてデフォルトでオーバーフローします)。

 select { width: 6em; }

メニューが開かれると (要素がフォーカスされると)、オプションはコンテキストに必要な幅で表示されますが、これはページ コンテンツの上の「レイヤー」に表示されるため、レイアウトを乱すことはありません。

問題が解決しない場合は、最小限の HTML および CSS コードを投稿して、問題を再現し、テストしたプラットフォームとブラウザーを特定してください。

于 2013-01-29T10:32:09.607 に答える