Есть ли способ исправить ширину выпадающего списка?

Question

Вот что я получил:

<select id="box1">
   <option>ABCDEFG</option>
</select>  

<select id="box2">
   <option>ABCDEFGHIJKLMNO</option>
</select>

У меня есть 2 разных выпадающих списка. Поскольку ширина выпадающего списка зависит от ширины самого длинного текста в опции, я получаю 2 выпадающих списка с 2 разными значениями ширины. Это делает мою веб-страницу глупой.

Я хочу установить его так, чтобы оба раскрывающихся списка имели одинаковую ширину (я бы предпочел, чтобы ширина была очень длинной, чтобы даже самый длинный элемент не усекался). *

Answer 1

Длина в зависимости от количества видимых опцийЕсли это так, используйте size.Вот документация .Дайте мне знать, если вы имеете в виду что-то другое.

После РЕДАКТИРОВАНИЯ: Установите ширину для выбора.Но было бы трудно установить ширину, чтобы показать только определенную длину. Второе редактирование: Вы не можете сделать это с помощью CSS, вы должны использовать JavaScriptПри каждом изменении выбора вы должны видеть, какой из двух элементов имеет максимальную ширину, и устанавливать то же самое для другого.

Answer 2

Используйте следующую строку. Она исправит ширину выпадающего списка.

<select id='box1' style='width: 200px;'>

<select id='box2' style='width: 200px;'> 

Если вы хотите указать ширину с помощью css, вы можете использовать следующий код.

#container select {
    width: 150px;
}

Answer 3

Вы можете использовать CSS, чтобы установить ширину элемента <select>, но вам будет трудно получить ширину, точно соответствующую заданному количеству символов.

Почему вы хотите, чтобы текст опции был обрезан?

Answer 4

Вам нужно использовать JavaScript после загрузки страницы (укажите свой список id="listA"):

document.getElementById('listA').length = 20

Это будет эффективно обрезать его до 20 элементов.