2012-02-07 41 views
6

estoy usando html y mobile.here jQuery es el código:poner dos de entrada de texto en la misma línea

<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> 
      </fieldset> 
     </form> 
    </div> 

No soy capaz de poner en la misma línea dos de entrada de texto. Intenté la cuadrícula de bloque pero no funcionó

+1

Te refieres al lado del otro? ¿Qué has intentado hasta ahora? ¿Qué sale mal cuando lo intentas? –

+0

¿Y cuál es su CSS? Puede usar 'flotar' simple para hacer que ambos estén en la misma línea. –

Respuesta

1

DIV s son elementos de bloque: de manera predeterminada ocupan un ancho del 100%. Esto hace que los siguientes elementos aparezcan en "la siguiente línea".

Por lo tanto, es necesario mover el segundo conjunto de elementos en el mismo DIV como el primer (o re-estilo de su divs con un ancho fijo y el uso de flotadores, pero eso es un poco más difícil)

3

Justo añadir flotadores a los divs:

<form action = "./includes/user_form.php" method="post" id = "form"> 
     <div data-role = "fieldcontain" class = "ui-hide-label" style="float:left"> 
      <label for="name">Name</label> 
      <input type="text" name="name" id="name" value="" placeholder="Name" /> 
     </div> 
     <div data-role ="fieldcontain" class= "ui-hide-label" style="float:left"> 
      <label for="surname">Surname</label> 
      <input type="text" name="surname" id="surname" value="" placeholder="Surname"/> 
     </div> 
    </form> 
+0

Correcto, aquí está [caso de prueba simple] (http://jsfiddle.net/PDrEP/). –

+0

desafortunadamente lo intenté pero no funcionó – Mazzy

+0

@ShadowWizard lo que muestra en jsfiddle es incorrecto, ¡no cargó el módulo de interfaz de usuario de jquery! –

7

Usted debe tener en cuenta dos diseño de columna en jquery mobile: jquerymobile.com/demos/1.0.1/docs/content/content-grids.html

el código debería ser algo como esto:

<form action = "./includes/user_form.php" method="post" id = "form"> 
    <div class="ui-grid-a"> 
      <div data-role = "fieldcontain" class = "ui-hide-label ui-block-a"> 
       <label for="name">Name</label> 
       <input type="text" name="name" id="name" value="" placeholder="Name" /> 
      </div> 
      <div data-role ="fieldcontain" class= "ui-hide-label ui-block-b"> 
       <label for="surname">Surname</label> 
       <input type="text" name="surname" id="surname" value="" placeholder="Surname"/> 
      </div> 
    </div> 
</form> 
+0

Intenté usar las grillas de contenido, pero no funcionó. ¿Alguna idea? – Mazzy

+0

¿Son las tablas feas una opción para ti? –

5

Sé que esta pregunta es un poco viejo pero tenía el mismo problema y esto es lo que funcionó para mí:

<fieldset class="ui-grid-a"> 
<div class="ui-block-a"> 
     <input type="text" id="" name="" value=""> 
</div> 
<div class="ui-block-b"> 
     <input type="text" id="" name="" value=""> 
</div> 

puede incluso añadir un poco de estilo para cambiar el tamaño relativo en el campo.

0

Otro consejo es consultar el tipo de datos = tipo "horizontal" (sin juego de palabras).

<fieldset data-role="controlgroup" data-mini="true" data-type="horizontal"> 
        <div data-role="fieldcontain"> 
         <label for="textinput11"> 
         Something: 
         </label> 
         <input name="something" id="textinput11" placeholder="" value="" type="text"> 
        </div> 

        <div data-role="fieldcontain"> 
         <label for="textinput12"> 
         Something else: 
         </label> 
         <input name="something_else" id="textinput12" placeholder="" value="" type="text"> 
        </div> 
        </fieldset> 
2

estoy usando <span> envoltura alrededor de la entrada con la clase que anula display atributo de anidado <div> (generado por jquery móvil). También debe establecer explícitamente el ancho de entrada.

Ejemplo http://jsfiddle.net/FabyD/

CSS:

.inlineinput div { 
    display: inline; 
} 

HTML:

<div> 
    some text 
    <span class="inlineinput"> 
     <input type='text' style='display: inline; width: 50px;' /> 
    </span> 
    some text 
    <span class="inlineinput"> 
     <input type='text' style='display: inline; width: 50px;' /> 
    </span> 
    some text 
</div> 
Cuestiones relacionadas