Rendere il campo di testo mobile jQuery sulla stessa riga del testo

Question

C'è un modo per fare quanto segue con jQuery Mobile?

Hello [________________________] 

invece di quello che jQuery Mobile attualmente fa, che viene messa questi due su più righe:

Hello 

[________________________] 

Attualmente sto creando il mio testo e textinput in questo modo:

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

Answer 1

Sì è possibile, è necessario utilizzare i contenitori di campo, con data-role="fieldcontain".

Ad esempio:

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

Con il codice di cui sopra, si dovrebbe ottenere qualcosa di simile:

immissione di testo: [_ __ _ __ _ __ _ __]

e non qualcosa di simile:

immissione di testo:
[_ __ _ __ _ __ _ __]

È può usare questo "formato" per molti tipi di elementi: t ingressi ext, pulsanti di opzione, selezionare i menu, ecc Tuttavia, penso che se il testo è troppo lungo, in questo caso, l'elemento può automaticamente passare alla riga successiva ...

---

dato il vostro ad esempio, si potrebbe desiderare di provare qualcosa di simile:

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

---

Controllare il documento in linea per ulteriori informazioni:http://jquerymobile.com/demos/1.1.1/docs/forms/textinputs/

Spero che questo aiuti.

Answer 2

galleggiante: a sinistra farà il trucco.Vedere questo esempio con le linee dei campi normali e mini-size:

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

Questo non funziona più:

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

Un tavolo vecchio stile funziona alla grande:

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