我在一個表單中有 2 個下拉選單，但希望它們彼此相鄰。我試過 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 = "dropdowns" id = "currencyAmount">
<div class = "labels">
<label for="amount">Amount</label>
</div>
<input type="number" name="amount">
</div>
</form>
</div>uj5u.com熱心網友回復：
為此使用 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>uj5u.com熱心網友回復：
這是使用行內塊的方法
.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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/386348.html