HTML でのドロップダウン オプションの幅のカスタマイズ
HTML 選択ドロップダウンを使用する場合、画面を超えてしまうような長いオプション値が表示されることがよくあります。幅が狭いため、リスト内の移動が困難になります。この問題に対処するには、次の手法の実装を検討してください。
オプション 1: CSS でドロップダウンの幅を制限する
プロンプトで説明されているように、ドロップダウンの幅を設定できます。 CSS を使用して要素とそのオプションを選択します。ただし、このアプローチはすべてのブラウザ、特に Google Chrome では機能しない可能性があります。
オプション 2: 幅固定コンテナにドロップダウンを埋め込む
より信頼性の高い解決策には、固定幅の div コンテナ内のドロップダウンを選択し、「width: auto」を select タグに適用します。これにより、ドロップダウンがクリック時に展開され、コンテナ内に制限されたまま、完全なオプション値を収容できるようになります。
コード例:
<code class="html"><!-- HTML --> <div class="dropdown_container"> <select class="my_dropdown" id="my_dropdown"> <option value="1">LONG OPTION</option> <option value="2">short</option> </select> </div> <!-- CSS --> div.dropdown_container { width:10px; } select.my_dropdown { width:auto; } /*IE FIX */ select#my_dropdown { width:100%; } select:focus#my_dropdown { width:auto; }</code>
追加考慮事項:
以上がHTML でドロップダウン オプションの幅をカスタマイズするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。