selectとInputとButtonのHTML要素を1行に整列します

Question

何かが私のライニングに役立つことがありますドロップダウン、入力と送信ボタンを1行で選択します。

入力とボタンだけが並んでいますが、選択は上向きです。

私はCSSで以下試みたが、あなたは1行のすべてを揃えるためにCSSを修正するために助けてください

display : inline; 

を動作しませんでした。一見まあ

Demo

Answer 1

をうまくいくと思うこれを試してみてくださいフレックスレイアウトプロパティを保持します。

display : inline-flex; 

Answer 2

私はあなたのHTMLの構造は、あなたの最初の問題になるだろうことを伝えることができます。 inputタグとsubmitボタンはselectタグの直後に置かなければならず、それぞれの要素にインラインを適用することができます。

Answer 3

あなたの例はどこにでもあります。また、「セレクター」は「セレクター」の綴りが必要ですが、それはポイントの横にあります。より多くのコードを囲むには、さらに多くの要素を使用します。例えば：

<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は、互いの下に表示します。しかし、使用しているものに似たスタイルルールを追加すると、これらの3つの要素の結果が1行にまとめられます。

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