Горизонтальный список с полем выбора

Question

Я использую тег списка <ul><li>, в котором у меня есть 3 тега, такие как sos:

<ul id="reg-lists" >
    <li class="one">
            <select>...</select>
        </li> 
    <li class="two">
            <select>...</select>
        </li> 
    <li class="three">
            <select>...</select>
        </li> 
    </ul>

У меня есть правильный CSS, чтобы сделать список горизонтальным:

#the-form li {
    display:inline !important;
    list-style-type: none;
    padding-right: 10px;    
}

Я, кажется, не работает, хотя и не уверен, почему.Горизонтальное правило, кажется, применяется хорошо, пока вы не положите комбо.Буду признателен за вашу помощь.Спасибо

Answer 1

Вам необходимо задать для <ul> заданную ширину, равную ширине всех комбинированных <li>, а затем установить для <li> значение float:left;

.

Answer 2

У меня работает нормально - посмотрите это JSFiddle - элементы списка отображаются горизонтально, по крайней мере, когда я смотрю на это в Firefox.

Если вы видите что-то еще в другом браузере, сообщите нам об этом.

Если это так, решением может быть использование display:inline-block вместо display:inline.

inline-block аналогично inline, но позволяет элементу содержать элементы типа блока, которые не разрешены обычным стилем display:inline.

Надеюсь, это поможет.