水平对齐选择标签

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>