JQuery Mobile - 在标签内部显示的选择元素未正确显示

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 链接。希望能更清楚地展示问题。

- Kyle

---

哦不！您正在错误地使用标签。<label>元素不应该包裹输入元素。http://www.w3.org/TR/WCAG20-TECHS/H44.html - Terry

感谢提供信息(:。是的，我确实认为这是一个不好的想法，但是考虑到 jQuery 移动版在显示标签方面的优势，似乎可以通过这种方式完成我的目标。 - Kyle

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>

- Jaumesv

---

谢谢，我认为你是对的，可折叠小部件更适合我想要实现的目标。 - Kyle

Answer 2

是的，我看到你代码中唯一的问题就是你把 <p> 标签包裹在了 <?php 和 ?> 语句外面，正确的方式应该是这样的：

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

- Errol Wallace