水平對齊選擇標簽

Question

<div style="width:100%;" id="comboDiv">   
    <div style="width: 100px;">
        <select style="width: 100%;"/>
    </div>
    <div style="width: 200px;">
        <select style="width: 100%;" />
    </div>
    <input type="text" style="width: 10%; float:right;" />
</div>

我需要將這3個項目對齊成一行，但是我只得到一個選擇標簽和輸入框。 我嘗試將浮點樣式應用於div和其他各種CSS樣式，但是我無法連續獲得2個選擇標記以及右對齊的文本框。

Answer 1

您尚未關閉<select></select>並使用float:left將兩個div水平對齊。

 <div style="width:100%;" id="comboDiv"> <div style="width: 100px; float:left;"> <select style="width: 100%;" > <option value="1">1</option> <option value="2">2</option> </select> </div> <div style="width: 200px; float:left;"> <select style="width: 100%;" > <option value="1">1</option> <option value="2">2</option> </select> </div> <input type="text" style="width: 10%; float:right;" /> </div> 

更新資料

或者您可以使用display:inline並刪除不必要的div如下所示：

 <div style="width:100%;" id="comboDiv"> <select style="width: 100px; display:inline;" > <option value="1">1</option> <option value="2">2</option> </select> <select style="width: 200px; display:inline;" > <option value="1">1</option> <option value="2">2</option> </select> <input type="text" style="width: 10%; float:right;" /> </div> 

Answer 2

正確關閉您的選擇標簽並為內部DIV display: inline-block; 樣式。

 #comboDiv > div { display: inline-block; } 

 <div style="width:100%;" id="comboDiv"> <div style="width: 100px; "> <select style="width: 100%;"></select> </div> <div style="width: 200px; "> <select style="width: 100%;"></select> </div> <input type="text" style="width: 10%; float:right;" /> </div> 

Answer 3

嘗試這個

 <div style="width:100%;" id="comboDiv"> <div style="width: 100px; display: inline-block"> <select style="width: 100%;"></select> </div> <div style="width: 200px; display: inline-block"> <select style="width: 100%;"></select> </div> <input type="text" style="width: 10%; float:right;" /> </div> 

Answer 4

<div style="width:100%;" id="comboDiv">   
                    <div style="width: 100px;display: inline-block;">
                        <select style="width: 100%;display: inline;">
                        </select>
                    </div>
                    <div style="width: 10%;display: inline-block;">
                        <select style="width: 100%;">
                        </select>
                </div>

                <input type="text" style="width: 10%;float:right;display: inline;">
            </div>

使用</select>關閉<select> </select>

Answer 5

嘗試這個。 默認寬度為100％，選擇或輸入的默認樣式為inline。

<div style="width:100%;" id="comboDiv">
    <select style="width: 100px;"></select>
    <select style="width: 200px;"></select>
    <input type="text" style="width: 10%;" /> 
 </div>

考慮不使用px來調整大小，而是使用em等相對單位，它將根據用戶的字體大小正確縮放。

Answer 6

只需使用table標記即可獲得所需的確切輸出。以下是相同的代碼。

<div style="width:100%;" id="comboDiv">   
             <table>     
             <tr>
                  <td width="200px"> 
                      <div style="width: 100px; ">
                      <select style="width: 200px;" /> 
                      </div>
                   </td>
                   <td>
                    <div style="width: 200px; ">
                    <select style="width: 200px;margin_left:10em;" />
                    </div>
                   </td>
             </tr>
             </table> 
          <div>
               <input type="text" style="width: 100px; float:right;" />
          </div>

</div>