将选择和输入和按钮HTML元素排成一行

Question

有人可以帮我排列选择下拉，输入和提交按钮在一行中。

我只得到输入和按钮在行中对齐，但选择是上升的。

下面我试着在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>将显示在另一个之下。但是，如果我们添加与您正在使用的样式相似的样式规则，我们将在一行中将这三个元素的结果组合在一起。

.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>