css - đặt chiều rộng tối đa cho chọn

Question

Tôi có một biểu mẫu có danh sách địa điểm thả xuống và nút gửi. Chúng được cho là trên cùng một dòng, nhưng kể từ khi danh sách các địa điểm là động, nó có thể trở nên quá dài và nhấn nút xuống.

Tôi đã nghĩ đến việc đặt thuộc tính chiều rộng tối đa cho lựa chọn, nhưng tôi không rõ liệu điều này có hoạt động trên tất cả các trình duyệt hay không. Bạn có bất cứ đề nghị về một workaround?

<form action="http://localhost/ci-llmg/index.php/welcome/searchVenueForm" method="post"  class="searchform"> 
    <select name="venue"> 
     <option value="0" selected="selected">Select venue...</option> 
     <option value="1">venue 0</option> 
     <option value="2">club 1</option> 
     <option value="3">disco 2</option> 
     <option value="4">future test venue</option> 
    </select> 
    <input type="submit" name="" value="Show venue!" class="submitButton" /> 
</form> 

css:

.searchform select { 
max-width: 320px; 
} 

.searchform input.submitButton { 
float: right; 
} 

Answer 1

Nếu những địa điểm được tạo ra ở phía máy chủ, bạn có thể sử dụng kịch bản phía máy chủ của bạn để cắt chúng xuống một số ký tự tối đa cụ thể.

Khi sử dụng CSS tinh khiết, tôi cũng thử đặt overflow:hidden, cả trên các yếu tố select và option. Ngoài ra, hãy thử đặt max-width trên phần tử tùy chọn. Khi nó hoạt động trong tất cả các trình duyệt IE, bạn có thể sử dụng các tập lệnh thông thường để thêm hỗ trợ độ rộng tối đa cho IE.

Answer 2

thử:

fieldset select { 
    width: auto; 
}