質問: SELECT内のOPTION要素が長すぎてモバイルレイアウトが壊れています 私は応答性の高いサイト設計をしていますが、そのほとんどはうまく動作します。 チェックアウトページには、選択した国の*選択*要素があります。オプションのいくつかは非常に長く、例えば、 "コンゴ、民主共和国"です。これはレイアウトを右に押し出し、レイアウトを破ってレイアウトを水平にスクロールさせます - これは恐ろしいことです;) 選択を完全に削除すると、レイアウトは正常に表示されます。そして、私がすべてのオプションを削除し、それらの場所に短いテストを入れると、それはうまく動作します。ですから、長い*オプション*が問題であると確信しています。選択自体は50%の幅しかないので、画面からは出ない。つまり、「見えない」オプション要素である。 Here is a temp link: デスクトップでうまく動作し、問題はiphone mobile(safari、chrome、opera)にあります。 ありがとう、誰かがこれのための解決策にいくつかの光を発することを願っていますか? スティーブ
回答: 通常、 `select` 要素自体に幅を設定するだけで十分です(親要素の幅の設定とは逆です - 必要に応じて内部要素がデフォルトでオーバーフローします)。 ``` select { width: 6em; } ``` メニューを開くと(要素がフォーカスされているとき)、オプションはコンテキストに必要な幅で表示されますが、これはページコンテンツの上部の「レイヤー」に表示されるため、レイアウトを妨げてはなりません。 問題が解決しない場合は、最小限のHTMLとCSSコードを投稿して問題を再現し、テストされたプラットフォームとブラウザを特定してください。