Điều khiển dòng giới thiệu trên thiết bị di động trong một dòng

Question

Làm cách nào để xếp hàng các điều khiển biểu mẫu như các hộp chọn và các điều khiển khác trong một dòng trong jquery so với chúng hiển thị theo chiều dọc?

<label for="select-choice-0" class="select">Shipping method:</label> 
<select name="select-choice-0" id="select-choice-1"> 
    <option value="standard">Standard: 7 day</option> 
    <option value="rush">Rush: 3 days</option> 
    <option value="express">Express: next day</option> 
    <option value="overnight">Overnight</option> 
</select> 
<label for="select-choice-2" class="select">Shipping method:</label> 
<select name="select-choice-2" id="select-choice-2"> 
    <option value="standard">Standard: 7 day</option> 
    <option value="rush">Rush: 3 days</option> 
    <option value="express">Express: next day</option> 
    <option value="overnight">Overnight</option> 
</select> 

Tôi không muốn chúng trong cùng một fieldset với kiểu dữ liệu = "ngang". Cảm ơn

Answer 1

Ví dụ thay thế sử dụng CSS và dữ liệu inline = "true" tag

• http://jsfiddle.net/CFXxt/

CSS

#inline-select-container { 
    overflow:auto; 
} 
#inline-select-left { 
    float:left; 
} 

#inline-select-right { 
    float:right; 
} 
​ 

HTML

<div data-role="page" class="type-home"> 
    <div data-role="content"> 

     <div id="inline-select-container"> 

      <div id="inline-select-left">  
       <select name="select-choice-0" id="select-choice-1" data-inline="true"> 
        <option >Shipping method</option> 
        <option value="standard">Standard: 7 day</option> 
        <option value="rush">Rush: 3 days</option> 
        <option value="express">Express: next day</option> 
        <option value="overnight">Overnight</option> 
       </select> 
      </div> 

      <div id="inline-select-right"> 
       <select name="select-choice-2" id="select-choice-2" data-inline="true"> 
        <option >Shipping method</option> 
        <option value="standard">Standard: 7 day</option> 
        <option value="rush">Rush: 3 days</option> 
        <option value="express">Express: next day</option> 
        <option value="overnight">Overnight</option> 
       </select> 
      </div>  

     </div> 

     <br /> 
     <br /> 

     <div id="inline-select-container"> 

      <div id="inline-select-left">  
       <label for="select-choice-0" class="select">Shipping method:</label> 
       <select name="select-choice-0" id="select-choice-1" data-inline="true"> 
        <option value="standard">Standard: 7 day</option> 
        <option value="rush">Rush: 3 days</option> 
        <option value="express">Express: next day</option> 
        <option value="overnight">Overnight</option> 
       </select> 
      </div> 

      <div id="inline-select-right"> 
       <label for="select-choice-2" class="select">Shipping method:</label> 
       <select name="select-choice-2" id="select-choice-2" data-inline="true"> 
        <option value="standard">Standard: 7 day</option> 
        <option value="rush">Rush: 3 days</option> 
        <option value="express">Express: next day</option> 
        <option value="overnight">Overnight</option> 
       </select> 
      </div>  

     </div>   
    </div> 
</div>​ 

Answer 2

Bố cục lưới có phù hợp với bạn không? Dưới đây là một ví dụ:

• http://jsfiddle.net/RM5eq/

HTML

<div data-role="page" class="type-home"> 
    <div data-role="content"> 

     <div class="ui-grid-a"> 
      <div class="ui-block-a"> 
       <select name="select-choice-0" id="select-choice-1"> 
        <option>Shipping method</option> 
        <option value="standard">Standard: 7 day</option> 
        <option value="rush">Rush: 3 days</option> 
        <option value="express">Express: next day</option> 
        <option value="overnight">Overnight</option> 
       </select> 
      </div> 
      <div class="ui-block-b"> 
       <select name="select-choice-2" id="select-choice-2"> 
        <option>Shipping method</option> 
        <option value="standard">Standard: 7 day</option> 
        <option value="rush">Rush: 3 days</option> 
        <option value="express">Express: next day</option> 
        <option value="overnight">Overnight</option> 
       </select> 
      </div>  
     </div> 

    </div> 
</div>​ 

Documents cho các tùy chọn Lưới Layout

• http://jquerymobile.com/demos/1.1.0/docs/content/content-grids.html

Answer 3

tôi đã có thể thích jquery-mobile-960.

jquery-mobile-960 là một cổng 960 lưới để di động jquery. Nó kết hợp tính linh hoạt của 960.gs và dễ dàng di động jquery. Nó nhằm mục đích mang lại sự linh hoạt hơn cho bố cục jquery-mobile và do đó làm cho nó dễ sử dụng hơn trên máy tính bảng.