在一行中添加带有输入文本的选择框

Posted 2023-02-23

【中文标题】在一行中添加带有输入文本的选择框

【英文标题】：Adding select box with input text in one row

【发布时间】：2013-08-30 10:51:23

【问题描述】：

我有一个列表，它看起来像一个表格，右侧是文本，左侧是输入文件。 它看起来像这样：

输入 | 标签

输入 | 标签

等等……

我想添加一行，其中包含一个 select box、input text 和 label，如下所示：

选择框 |输入 |标签

所以我将此代码添加到列表中

  <li>
                              <label for="a2">number2</label>
                              <span id="a2" style="width:30%; float:right;">
                                   <input type="text" id="Text5"></span>

                             <select name="select-choice-1" id="select3" >
                                    <option selected="selected" value=""/>
                                    <option value="22">22</option>
                                    <option value="33">33</option>
                                    <option value="44">44</option>
                                    <option value="55">55</option>
                            </select>

                         </li>

它看起来完全符合我的要求，只有一个问题是 input text 被禁用（我无法输入任何文本） 如果我用简单的输入文本替换所有选择框，它的外观和工作正常。

我注意到在选择 div 包装后：<div data-role="fieldcontain">

 <div data-role="fieldcontain">   

     <select name="select-choice-1" id="select3" >
                                    <option selected="selected" value=""/>
                                    <option value="22">22</option>
                                    <option value="33">33</option>
                                    <option value="44">44</option>
                                    <option value="55">55</option>
   </select>

 </div>

然后它可以正常工作，但它会换行，看起来不像我想要的那样。

我怎样才能解决这个问题并保持我上面描述的设计，事实上我应该改变什么，这样我的第一个例子才能正常工作。

【问题讨论】：

将以下样式之一添加到 div display:inline 或 display:inline-block

【参考方案1】：

试试这个方法 html

<element1></element1>
<element2></element2>
<element3></element3>
<br class="clear" />

css

element1,element2,element3
    float: left;

br.clear
    clear:both;

【参考方案2】：

我通常做的是浮动：离开所有元素。您需要将它们中的 3 个向左浮动，否则它们会表现得很奇怪。还要注意 li 元素可能会失去它的高度，所以你应该添加溢出：隐藏到它