当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Adding select box with input text in one row

问题描述:

I have a list, that looks like a table with a text from right side and input file on the left side.

it looks like this:

input | label

input | label

and so on...

I want to add a row with one select box, input text and label, like this:

selectBox | input | label

so I added this code to the list

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

It looks exactly as I want, only with one problem that the input text is disabled (I cant enter any text to it)

if I replce all the select box with simple input text its looks and work ok.

I noticed that after wraping the select div with : <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>

And then it works correctly but it getting down to a new line, and dont looks like I want.

How can I fix this issue and stay with the design I describes above, in fact what should I change so my first examle will work properly.

网友答案:

try this method html

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

css

element1,element2,element3{
    float: left;
}
br.clear{
    clear:both;
}
网友答案:

What I usually do is I float:left all elements. You need to float left the 3 of them, or they will act weird. Also be careful that the li element may lose it's height, so you should add overflow:hidden to it

分享给朋友:
您可能感兴趣的文章:
随机阅读: