Question

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

输入 |的标签

依旧......

我想添加一行select box，input tex和label，如下所示：

selectBox |输入|标签

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

  <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 data-role="fieldcontain">

包装select div之后

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

然后它正常工作，但它开始新的一行，并且看起来不像我想要的那样。

我如何解决这个问题，并坚持上面描述的设计，实际上应该改变什么，以便我的第一次考试能够正常运作。

Answer 1

我通常做的是漂浮：留下所有元素。你需要漂浮其中的3个，否则他们会表现得很奇怪。另外要小心li元素可能会失去它的高度，所以你应该添加overflow：hidden to it

Answer 2

尝试这种方法 HTML

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

CSS

element1,element2,element3{
    float: left;
}
br.clear{
    clear:both;
}

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

2 个答案: