css - establecer ancho máximo para seleccionar

Question

Tengo un formulario con una lista desplegable de lugares y un botón Enviar. Se supone que están en la misma línea, pero como la lista de lugares es dinámica, puede ser demasiado larga y presionar el botón.

Estaba pensando en establecer una propiedad de ancho máximo para la selección, pero no estoy seguro de si esto funcionará en todos los navegadores. ¿Tiene alguna sugerencia sobre una solución alternativa?

<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

Si los espacios se generan en el lado del servidor, puede utilizar el script del lado del servidor para cortarlos a un recuento de caracteres máximo específico.

Cuando uso CSS puro, también intento configurar overflow:hidden, tanto en los elementos select como option. También intente configurar max-width en el elemento de opción. Cuando funciona en todos los no-IE, puede utilizar los scripts habituales para agregar soporte de ancho máximo para IE.

Answer 2

intento:

fieldset select { 
    width: auto; 
}