jquery controles de alineación móvil en una línea

Question

¿Cómo alinear controles de formulario como cuadros de selección y otros en una línea en jquery vs tenerlos visualizados verticalmente?

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

No los quiero en el mismo fieldset con data-type = "horizontal". Gracias

Answer 1

ejemplo alternativo usando CSS y-inline datos de la etiqueta = "true"

• 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

¿Te serviría un diseño de cuadrícula? He aquí un ejemplo:

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

Docs para las opciones de diseño de cuadrícula

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

Answer 3

me ha gustado jquery-mobile-960.

jquery-mobile-960 es un puerto de red 960 para jquery móvil. Combina la flexibilidad de 960.gs y la facilidad de jquery para dispositivos móviles. Su objetivo es brindar más flexibilidad al diseño de jquery-mobile y así facilitar su uso en tabletas.