Выровнять элементы выбора и ввода и кнопки HTML в одной строке

Question

Может ли кто-нибудь помочь мне на подкладке Выберите Drop down, Input and Submit button в одной строке.

Я получаю только вход и кнопку, выровненную в строке, но Select идет вверх.

Я попытался ниже в CSS, но не работает

display : inline; 

Можете ли вы помочь изменить CSS, чтобы выровнять все в одной строке.

Demo

Answer 1

Я нашел решение, мне просто нужно сделать

инлайн-флекс => инлайн-флекс делает контейнер встроенный в то же время сохраняя свойства гибкой компоновки.

display : inline-flex; 

Answer 2

Ну, на первый взгляд, я могу сказать вам, что ваш HTML структура будет ваша первая проблема. Кнопка ввода и отправки должна немедленно следовать тегу select, а затем вы можете применить «inline» для каждого из элементов.

Answer 3

Ваш пример немного повсюду. Кроме того, «selecter» должен быть записан «селектор», но это не относится к точке. Используйте более <div> элементов для обертывания небольших сегментов кода. Например:

<div> 
     <div class="item"><p>Hello</p></div> 
     <div class="item"><p>Stack</p></div> 
     <div class="item"><p>Overflow!</p></div> 
    </div> 

Обычно эти <div> «s будет отображаться под друг друга. Однако, если мы добавим правило стиля, подобное тому, которое вы используете, мы получим результат этих трех элементов вместе на одной строке.

.item { 
    display: inline-block; 
} 

Оберните кнопки элементы в <div> контейнере и стиль их с вышесказанным. Отвечает ли это на ваш вопрос?

Answer 4

попробовать это я думаю, что это прекрасно работает

.row{ 
 
\t \t width: 100%; 
 
\t \t margin: 100px; 
 
\t } 
 
\t select,input,button{ 
 
\t \t float: left; 
 
\t \t padding: 5px; 
 
\t \t margin-left: 5px; 
 
\t } 
 
\t \t 
 

 
select{ 
 
\t padding: 5px 45px; 
 
\t width: 20%; 
 
} 
 
input{ 
 
\t padding: 5px 45px; 
 
\t \t width:33%; 
 

 
} 
 

 
button{ 
 
\t padding: 7px 50px; 
 
\t background: #333; 
 
\t border: none; 
 
\t border-radius: 4px; 
 
\t cursor: pointer; 
 
\t color: white; 
 
}

<div class="row"> 
 
\t 
 
<select> 
 
\t <option>car</option> 
 
\t <option>toyata</option> 
 
\t <option>ferrari</option> 
 
\t <option>ford</option> 
 
</select> 
 
<input type="" name="" placeholder="input"> 
 
<button type="submit" value="submit">submit</button> 
 

 
</div>