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。

＆＃13;

<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>

＆＃13;

<强>更新

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

＆＃13;

<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>

＆＃13;

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

试试这个

＆＃13;

{{1}}

＆＃13;

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>

Answer 5

试试这个。默认宽度为100％，选择或输入的默认样式为display：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

只需使用表格标签，就可以获得所需的确切输出。这是相同的代码。

<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>

水平对齐选择标签

6 个答案: