1

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

输入 | 标签

输入 | 标签

等等...

我想添加一行,其中包含一个select boxinput 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>

然后它工作正常,但它进入了一个新的行,看起来不像我想要的。

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

4

2 回答 2

0

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

于 2013-08-27T15:40:08.657 回答
0

试试这个方法html

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

css

element1,element2,element3{
    float: left;
}
br.clear{
    clear:both;
}
于 2013-08-27T17:16:01.320 回答