Có cách nào để sửa chiều rộng của danh sách thả xuống không?

Question

Đây là những gì tôi nhận được:

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

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

Tôi có 2 danh sách thả xuống khác nhau. Vì chiều rộng của danh sách thả xuống phụ thuộc vào độ rộng của văn bản dài nhất trong tùy chọn, tôi kết thúc với 2 danh sách thả xuống có 2 chiều rộng khác nhau. Điều này làm cho trang web của tôi trông rất ngốc nghếch.

Điều tôi muốn là đặt nó sao cho cả hai danh sách thả xuống của tôi sẽ có cùng chiều rộng (tôi muốn chiều rộng rất dài, vì vậy ngay cả mục dài nhất sẽ không bị cắt bớt).

Answer 1

Bạn có thể sử dụng CSS để đặt chiều rộng của phần tử <select>, nhưng sẽ khó để có được chiều rộng để khớp chính xác với một số ký tự nhất định.

Tại sao bạn muốn văn bản của tùy chọn bị cắt bớt?

Answer 2

Độ dài đề cập đến số tùy chọn hiển thị ?? Nếu đó là trường hợp sử dụng size. Đây là số documentation. Hãy cho tôi biết nếu bạn có ý nghĩa gì khác.

Sau khi EDIT: Đặt chiều rộng cho lựa chọn. Nhưng sẽ khó đặt độ rộng để chỉ hiển thị độ dài cụ thể. Chỉnh sửa thứ hai: Bạn không thể làm điều đó bằng cách sử dụng CSS, bạn phải sử dụng javascript. Trên mọi thay đổi của lựa chọn, bạn phải xem cái nào của hai phần tử có chiều rộng tối đa và đặt cùng với phần tử kia.

Answer 3

Bạn cần phải sử dụng JavaScript sau khi tải trang (cho danh sách của bạn id="listA"):

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

này một cách hiệu quả sẽ cắt nó ở 20 hạng mục.

Answer 4

Sử dụng dòng sau. Nó sẽ sửa chiều rộng của danh sách thả xuống.

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

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

Nếu bạn muốn đề cập đến chiều rộng bằng css, bạn có thể sử dụng mã sau đây.

#container select { 
    width: 150px; 
}