Hacer que el campo de texto móvil de jquery esté en la misma línea que el texto

Question

¿Hay alguna manera de hacer lo siguiente con jQuery Mobile?

Hello [________________________] 

en lugar de lo que hace actualmente jQuery Mobile, que se pone a estos dos en varias líneas:

Hello 

[________________________] 

Actualmente estoy creando mi texto y la entrada de texto, así:

<div id="customTagEntryDiv"> 
    <span id="userTag">Hello</span> 
    <input type="text" name="customTagField" id="customTagField" value="" /> 
    </div> 

Answer 1

Sí puede, necesita usar contenedores de campo, con data-role="fieldcontain".

Por ejemplo:

<div data-role="fieldcontain"> 
    <label for="name">Text Input:</label> 
    <input type="text" name="name" id="name" value="" /> 
</div> 

Con el código anterior, usted debe obtener algo como esto:

entrada de texto: [_ __ _ __ _ __ _ __]

y no algo como esto:

entrada de texto:
[_ __ _ __ _ __ _ __]

Usted puede usar este "formato" para muchos tipos de elementos: t ext entradas, botones de radio, menús de selección, etc. Sin embargo, creo que si el texto es demasiado largo, en este caso, el elemento puede ir automáticamente a la siguiente línea ...

---

Teniendo en cuenta su ejemplo, es posible que quiere probar algo como esto:

<div id="customTagEntryDiv" data-role="fieldcontain"> 
    <label id="userTag" for="customTagField">Hello</label> 
    <input type="text" name="customTagField" id="customTagField" value="" /> 
</div> 

---

Compruebe el documento en línea para obtener más información:http://jquerymobile.com/demos/1.1.1/docs/forms/textinputs/

Espero que esto ayude.

Answer 2

flotador: izquierda hará el truco.Vea este ejemplo con las líneas de los campos normales y tamaño mini:

http://jsfiddle.net/den232/WzH3Y/

.floatleft { 
    float:left; 
} 
.floatright { 
    float:right; 
} 
.forceinline{ /* Prevent fieldcontain from doing a BLOCK thing */ 
    display:inline !important; 
} 
.textwidth { /* limit width of input fields */ 
    width:80px; 
} 
.closespacing { /* controls spacing between elements */ 
    margin:0px 5px 0px 0px; 
} 
.bigselect { /* centers select with big buttons */ 
    padding: 0px; 
    margin:2px 5px 0px 0px; 
} 
.biginputheight { /* matches text input height to big buttons */ 
    padding-top:10px !important; 
    padding-bottom:12px !important; 
} 
.miniinputheight { /* matches text input height to minibuttons */ 
    padding-top:5px !important; 
    padding-bottom:5px !important; 
} 
<div data-role="page" class="type-home"> 

<ul data-role="listview"> 
    <li data-role="fieldcontain">first LI line</li> 
    <li data-role="fieldcontain"> 

    <div class='floatleft closespacing'> 
     Big Buttons<br>More Text 
    </div> 


    <div class='floatleft textwidth'> 
     <input type="text" placeholder="left" class='biginputheight'></input> 
    </div> 

    <div class='floatright textwidth'> 
     <input type="text" placeholder="right" class='biginputheight'></input> 
    </div> 

    </li> 
    <li data-role="fieldcontain"> 

    <div class='floatleft closespacing'>  
     Small Buttons 
    </div> 


    <div class='floatleft textwidth'> 
     <input type="text" placeholder="e2" class='miniinputheight'></input> 
    </div> 


    <div class='floatright closespacing'> 
     <div class='floatright closespacing'>  
     e3 Text<br>on right 
     </div> 
     <div class='floatright textwidth'> 
     <input type="text" placeholder="e3" class='miniinputheight'></input> 
     </div> 
    </div> 
    </li> 
    <li data-role="fieldcontain">last LI line</li> 

</ul><!-- /listview --> 

Answer 3

Esto ya no funciona:

<div data-role="fieldcontain"></div> 

Una tabla pasada de moda funciona muy bien:

<table> 
    <tr> 
     <td>Label #1:</td> 
     <td><input type="text"></td> 
    </tr> 
</table>