javascript - 水平对齐选择标签

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 个元素排成一行，但我只得到一个选择标签和输入框。我已经尝试将 float 样式应用于 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>