HTML 選択ドロップダウン オプションの幅を制御するにはどうすればよいですか?

HTML 選択ドロップダウン オプションの効果的な幅管理

ドロップダウンの幅が画面の境界を超えると、選択ボックスに長いオプションを入力することが困難になります。選択ボックスの幅を手動で設定すると、ドロップダウン メニューの幅を制限できないことがよくあります。

解決策は、選択ボックスを固定幅の div コンテナ内にカプセル化することです。 div の幅と選択タグの幅を「auto」に設定すると、ほとんどのブラウザーで div 内にドロップダウンが含まれるようになります。ただし、クリックするとドロップダウンが展開され、完全なオプションが表示されます。

HTML:

<code class="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></code>

CSS:

<code class="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>

このメソッドは、読みやすさを損なうことなくドロップダウンの幅を効果的に管理します。 div コンテナはドロップダウンの初期幅を制限しますが、選択の「自動」幅によりクリック時にシームレスに拡張できます。 Internet Explorer との互換性のために、含まれている CSS 修正により適切なレンダリングが保証されます。

以上がHTML 選択ドロップダウン オプションの幅を制御するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。