web-dev-qa-db-ja.com

各オプションの幅を考慮せずに、HTML <select>要素の幅を設定する方法

実際、私は選択ボックスwidthがリストの最も長いオプションによって設定されていることを知っていますが、select html要素の長さ（幅）を増やしたいです。

私も検索し、このコードを理解しましたstyle="max-width:70%"は機能するかもしれませんが、私には機能しません。

以下のコードは私のものです：

<select class="form-control"style="max-width:70%">
    <option value="1">option 1 </option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
</select>
htmlhtml-selectdropdown
10
Niusha Ghanbari

max-widthの代わりにwidth属性を使用する必要があります。コードを以下のサンプルに修正します。

<select class="form-control"style="width:150px">
    <option value="1">option 1 </option>
    <option value="2">option 2sdsdsdsd</option>
    <option value="3">option 3</option>
</select>
11
Sheida Mohassesi

オプションの幅に関係なく、ドロップダウンの幅を増やすには、cssプロパティmin-widthを使用する必要があります。

html：

<select class="dropdown">
    <option value="1">option 1 </option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
</select>

css：

.dropdown{
  min-width: 200px;
}
4
AkshayM