Question

我希望在单选按钮标签中有一个下拉列表，它似乎可以正常工作，但它会切断它的底部。我遇到了与文本框类似的问题，但我通过使这些职位相对来解决这个问题。

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 here。希望能够更清楚地证明问题。

Answer 1

因为您这样做：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>

Answer 2

是的，我用你的代码看到的唯一问题是你是围绕和语句包装标签，正确的方法是：

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

JQuery Mobile - 选择元素在标签内无法正确显示

2 个答案: