將選擇和輸入和按鈕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>