我希望在单选按钮标签内有一个下拉菜单,它似乎可以工作,但是它切断了它的底部。我在文本框中遇到了类似的问题,但是我通过使位置相对来解决这个问题。
input.inline
{
position:relative !important;
display:inline;
}
<div id="confirmBooking" data-role="page" class="ui-page">
<div data-role="header" data-theme="b">
<h1>Welcome</h1>
</div>
<div data-role="content">
<h3>Choose:</h3>
<fieldset data-role="controlgroup">
<input checked="checked" type="radio" name="item-choice" id="existing-item"/>
<label for="existing-item">An Existing Item
<select class="mySelect">
<option>Option 1</option>
</select>
</label>
<input type="radio" name="item-choice" id="new-item"/>
<label for="new-item">New Item
<input class="inline" placeholder="Item Name"/>
<input class="inline" placeholder="Item Description"/>
</label>
</fieldset>
<div align="right">
<a data-icon="arrow-r" data-iconpos="right" href="#" id="submit" data-theme="b" data-role="button" data-inline="true">Make Booking</a>
</div>
</div>
</div>
我在这里添加了一个jsfiddle。
因为你这样做:http://jsfiddle.net/MehU5/3/而不是使用一个复选框使用一个单独的可折叠表单与不同的
<!-- Home -->
<div data-role="page" id="page1">
<div data-role="content">
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false">
<h3>
An existing item
</h3>
<div data-role="fieldcontain">
<label for="selectmenu1">
</label>
<select name="">
<option value="option1">
Option 1
</option>
</select>
</div>
<input value="Make booking" type="submit">
</div>
<div data-role="collapsible">
<h3>
New item
</h3>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="textinput1">
</label>
<input name="" id="textinput1" placeholder="Item name" value="Item name"
type="text">
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="textinput2">
</label>
<input name="" id="textinput2" placeholder="Item description" value=""
type="text">
</fieldset>
</div>
<input value="Make booking" type="submit">
</div>
</div>
</div>
</div>
是的,我看到你代码的唯一问题是你在和语句周围包装标签,正确的方法是:
<div data-role="content">
<form method="get" action="">
<fieldset data-role="fieldcontain">
<label for="select1">Basic Select Menu: </label>
<select name="select" id="select1">
<option value="1">Value 1 </option>
<option value="1">Value 1 </option>
</select>
</fieldset>
</form>
</div>