水平对齐选择标签答案

【问题标题】：Align select tags horizontally水平对齐选择标签
【发布时间】：2016-09-07 12:06:45
【问题描述】：

<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 个选择标签以及右对齐的文本框。

【问题讨论】：

你在使用引导程序吗？
不，我只是在一个简单的 HTML 页面中制作它
给 float:left 给所有子 div 没有解决问题？
不，已经试过了..
你能添加一个小提琴演示吗？

标签： javascript jquery html css

【解决方案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>

【讨论】：

感谢您的解决方案！！
div 是不必要的，浮动也是如此。 select 的默认值是 display: inline。
我给出了这个答案，以便提问者不必对他的代码进行太多更改。但你也是正确的@jedifans，正确的方法是使用display:inline。

【解决方案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>

【讨论】：

感谢您的解决方案.. !!

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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 这样的相对单位，它会根据用户的字体大小正确缩放。

【讨论】：

【解决方案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>

【讨论】：

它不起作用，因为select标签没有正确关闭。
jsfiddle.net/t4ydn2q6/1 在这里检查它会起作用，如果你不关闭选择标签也..你怎么说它不起作用？