一行/一行中有多个下拉菜单

Question

我在一个表单中有两个下拉列表，但希望它们挨着。我尝试了内联块，但这只会使标签位于下拉列表旁边。。。

<div class = "searchbar">
<form class = "form" name = "convert" action="/Resources/PHP/action_page.php">
<div class = "dropdowns" id = "currencyDropdown1">
<div class="labels">
<label for = "currencyFrom">From:</label>
</div>
<div class = "dropdown">
<select id = "currencyFrom" name = "currencyFrom">
<option id = "euro" name = "euro">Euro</option>
<option id = "peso" name = "peso">Peso</option>
<option id = "dollar" name = "dollar">Dollar</option>
</select>
</div>
</div>

<div class = "dropdowns" id = "currencyDropdown2">
<div class = "labels">
<label for = "currencyTo">To:</label>
</div>
<div class = "dropdown">
<select id = "currencyTo" name = "currencyTo">
<option id = "euro" name = "euro">Euro</option>
<option id = "peso" name = "peso">Peso</option>
<option id = "dollar" name = "dollar">Dollar</option>
</select>
</div>
</div>
<div class = "dropdowns" id = "currencyAmount">
<div class = "labels">
<label for="amount">Amount</label>
</div>
<input type="number" name="amount">
</div>
</form>
</div>

Answer 1

为此使用flex。另外，容器外的钞票数量

#container{
display:flex;
justify-content:space-evenly;
}
#currencyAmount{
text-align:center;}

<div class = "searchbar">
<form class = "form" name = "convert" action="/Resources/PHP/action_page.php">
<div id='container'>
<div class = "dropdowns" id = "currencyDropdown1">
<div class="labels">
<label for = "currencyFrom">From:</label>
</div>
<div class = "dropdown">
<select id = "currencyFrom" name = "currencyFrom">
<option id = "euro" name = "euro">Euro</option>
<option id = "peso" name = "peso">Peso</option>
<option id = "dollar" name = "dollar">Dollar</option>
</select>
</div>
</div>

<div class = "dropdowns" id = "currencyDropdown2">
<div class = "labels">
<label for = "currencyTo">To:</label>
</div>
<div class = "dropdown">
<select id = "currencyTo" name = "currencyTo">
<option id = "euro" name = "euro">Euro</option>
<option id = "peso" name = "peso">Peso</option>
<option id = "dollar" name = "dollar">Dollar</option>
</select>
</div>
</div>
</div>
<div class = "dropdowns" id = "currencyAmount">
<div class = "labels">
<label for="amount">Amount</label>
</div>
<input type="number" name="amount">
</div>
</form>
</div>

Answer 2

以下是如何使用内联块

.dropdowns{display:inline-block}

<div class = "searchbar">
<form class = "form" name = "convert" action="/Resources/PHP/action_page.php">
<div class = "dropdowns" id = "currencyDropdown1">
<div class="labels">
<label for = "currencyFrom">From:</label>
</div>
<div class = "dropdown">
<select id = "currencyFrom" name = "currencyFrom">
<option id = "euro" name = "euro">Euro</option>
<option id = "peso" name = "peso">Peso</option>
<option id = "dollar" name = "dollar">Dollar</option>
</select>
</div>
</div>

<div class = "dropdowns" id = "currencyDropdown2">
<div class = "labels">
<label for = "currencyTo">To:</label>
</div>
<div class = "dropdown">
<select id = "currencyTo" name = "currencyTo">
<option id = "euro" name = "euro">Euro</option>
<option id = "peso" name = "peso">Peso</option>
<option id = "dollar" name = "dollar">Dollar</option>
</select>
</div>
</div>
<div class = "dropdowns2" id = "currencyAmount">
<div class = "labels">
<label for="amount">Amount</label>
</div>
<input type="number" name="amount">
</div>
</form>
</div>