css - установить максимальную ширину для выбора

Question

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

Я думал об установке свойства max-width для select,но мне не ясно, будет ли это работать во всех браузерах.Есть ли у вас какие-либо предложения об обходном пути?

<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

Если места создаются на стороне сервера, вы можете использовать свои сценарии на стороне сервера, чтобы сократить их до определенного максимального количества символов.

При использовании чистого CSS я бы также попытался установить overflow:hidden как для элементов select, так и для option.Также попробуйте установить max-width на элементе option.Когда он работает во всех не-IE, вы можете использовать обычные сценарии, чтобы добавить поддержку максимальной ширины для IE.

Answer 2

попробовать:

fieldset select {
  width: auto;
}