css - set max-width für select

Question

Ich habe ein Formular mit einer Dropdown-Liste von Veranstaltungsorten und einem Absenden-Button. Sie sollen auf der gleichen Linie sein, aber da die Liste der Orte dynamisch ist, könnte es zu lang werden und den Knopf drücken.

Ich dachte über das Festlegen einer max-width Eigenschaft auf die Auswahl, aber ich bin nicht klar, ob dies in allen Browsern funktioniert. Haben Sie Vorschläge zu einem 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

Wenn die Orte auf der Serverseite generiert werden, können Sie Ihr Server-Side-Scripting verwenden, um sie eine bestimmte maximale Zeichenanzahl zu reduzieren.

Wenn Sie reines CSS verwenden, würde ich auch versuchen, overflow:hidden, sowohl auf die select als auch die option Elemente. Versuchen Sie auch, max-width auf das Optionselement zu setzen. Wenn es in allen Nicht-IE funktioniert, können Sie die üblichen Skripts verwenden, um die Unterstützung für die maximale Breite für IE hinzuzufügen.

Answer 2

Versuch:

fieldset select { 
    width: auto; 
}