设置表单输入元素内联使用jQuery的移动

Question

嗯，我创建了一个jQuery的移动表单，但每个元素是在一个新的行。我会将出生后的PR字段放在一个唯一的行中，并将单选按钮Male/Female放在与出生日期相同的行中。我能怎么做？我甚至试图用网格列布局，但没有work.Here是它自己的代码：两列

<div data-role = "content"> 
     <form action = "?" method="post" name="form" id = "form"> 
      <fieldset> 

      <div data-role = "fieldcontain" class = "ui-hide-label"> 
       <label for="name">Name</label> 
       <input type="text" name="name" id="name" value="" placeholder="Name" /> 
      </div> 

      <div data-role ="fieldcontain" class= "ui-hide-label"> 
       <label for="surname">Surname</label> 
       <input type="text" name="surname" id="surname" value="" placeholder="Surname"/> 
      </div> 

      <div data-role ="fieldcontain" class= "ui-hide-label"> 
       <label for="address">Address</label> 
       <input type="text" name="address" id="address" value="" placeholder="Address"/> 
      </div> 

       <div data-role="fieldcontain" class = "ui-hide-label"> 
        <label for="birth-place">Birth Place</label> 
        <input type="text" name="birth-place" id="birth_place" value="" placeholder="Birth Place" /> 
       </div> 
       <div data-role = "fieldcontain" class="ui-hide-label"> 
        <label for="province">Province</label> 
        <input type="text" name="province" id="province" value="" placeholder="PR" /> 
       </div> 

       <div data-role="fieldcontain" class="ui-hide-label"> 
        <label for"date">Birth Date</label> 
        <input type="datetime" name="dt" id="dt" value="" placeholder="Birth Date" /> 
       </div> 

       <div data-role="fieldcontain"> 
        <fieldset data-role="controlgroup" data-type="horizontal"> 
         <input type="radio" name="radio-choice-1" id="radio-choice-1" value="male" /> 
         <label for="radio-choice-1">Male</label> 
         <input type="radio" name="radio-choice-1" id="radio-choice-2" value="female" /> 
         <label for="radio-choice-2">Female</label> 
        </fieldset> 
       </div> 

       <div data-role="fieldcontain" data-type="horizontal"> 
        <label for="select-choice-0"></label> 
        <select name="select" id="select"> 
         <option value="politrauma">Politrauma</option> 
         <option value="cardiologico">Cardiologico</option> 
         <option value="neurologico">Neurologico</option> 
        </select> 
       </div> 

       </div> 
      </fieldset> 
     </form> 
    </div> 

Answer 1

网格布局工作正常。以下是修改后的代码。

<form action = "?" method="post" name="form" id = "form"> 
     <fieldset> 

     <div data-role = "fieldcontain" class = "ui-hide-label"> 
      <label for="name">Name</label> 
      <input type="text" name="name" id="name" value="" placeholder="Name" /> 
     </div> 

     <div data-role ="fieldcontain" class= "ui-hide-label"> 
      <label for="surname">Surname</label> 
      <input type="text" name="surname" id="surname" value="" placeholder="Surname"/> 
     </div> 

     <div data-role ="fieldcontain" class= "ui-hide-label"> 
      <label for="address">Address</label> 
      <input type="text" name="address" id="address" value="" placeholder="Address"/> 
     </div> 

     <div class="ui-grid-a"> 
      <div class="ui-block-a"> 
       <div data-role="fieldcontain" class = "ui-hide-label"> 
        <label for="birth-place">Birth Place</label> 
        <input type="text" name="birth-place" id="birth_place" value="" placeholder="Birth Place" /> 
       </div> 
      </div> 
      <div class="ui-block-b" style="width:48.5%"> 
       <div data-role = "fieldcontain" class="ui-hide-label"> 
        <label for="province">Province</label> 
        <input type="text" name="province" id="province" value="" placeholder="PR" /> 
       </div> 
      </div>     
     </div> 

     <div class="ui-grid-a"> 
      <div class="ui-block-a"> 
       <div data-role="fieldcontain" class="ui-hide-label"> 
        <label for"date">Birth Date</label> 
        <input type="datetime" name="dt" id="dt" value="" placeholder="Birth Date" /> 
       </div> 
      </div> 
      <div class="ui-block-b"> 
       <div data-role="fieldcontain"> 
        <fieldset data-role="controlgroup" data-type="horizontal"> 
         <input type="radio" name="radio-choice-1" id="radio-choice-1" value="male" /> 
         <label for="radio-choice-1">Male</label> 
         <input type="radio" name="radio-choice-1" id="radio-choice-2" value="female" /> 
         <label for="radio-choice-2">Female</label> 
        </fieldset> 
       </div> 
      </div>     
     </div>    

      <div data-role="fieldcontain" data-type="horizontal"> 
       <label for="select-choice-0"></label> 
       <select name="select" id="select"> 
        <option value="politrauma">Politrauma</option> 
        <option value="cardiologico">Cardiologico</option> 
        <option value="neurologico">Neurologico</option> 
       </select> 
      </div> 

      </div> 
     </fieldset> 
    </form>