Verhindern von Zeilenumbrüchen vor und nach einem Textfeld in JQuery Mobile

Question

Ich versuche, drei Steuerelemente zu erstellen, die horizontal angeordnet sind. In einem Versuch, dies zu tun, ich versuche zur Zeit folgenden:

<div data-role="controlgroup" data-type="horizontal"> 
    <input id="button1" type="button" value="<" /> 
    <span><input id="tally1" type="text" /></span> 
    <input id="button2" type="button" value=">" /> 
</div> 

Dieser Text erscheint Eingabefeld einen Zeilenumbruch vor und nach selbst einzufügen. Wenn ich das Textfeld entferne, wird alles wie erwartet angezeigt. Wie entferne ich den Zeilenumbruch? Wenn ich nicht kann, wie ordne ich diese drei Felder in einem horizontalen Stapel?

Vielen Dank!

Answer 1

sollte diese Arbeit:

#tally1 { 
    display:inline; 
} 

Versuchen display:inline;-display:inline !important; Ändern Es kann sein, dass das Textfeld ein Anzeigestil von JQuery Mobile vererben, Sie !important verwenden würde es außer Kraft zu setzen, aber nur als letztes Mittel Erholungsort.

Answer 2

Um einen Zeilenumbruch nach dem Text zu verhindern, muss das Feld FOLGEND der Text "display: inline! Wichtig;" haben.

Auch aus irgendeinem Grund, die nach dem (aktuellen zu diesem Beitrag) jquery Mobile v1.20 korrigiert werden können, sind die Höhen der Auswahl und Text-Eingaben nicht ganz richtig und brauchen eine kryptische Mischung aus Padding und Margen Arbeit.

Die "wichtigen" Spezifikationen wurden in der folgenden Geige benötigt. Hier ist eine Liste mit 2 Zeilen - eine an normale Tasten und eine an die Mini-Tasten ausgerichtet. Viel Glück!

Siehe http://jsfiddle.net/RM5eq/

<style> 
.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; 
} 
</style> 
<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 data-role="fieldcontain" class= 'forceinline'> 
     <div class='floatleft closespacing'>  
     <fieldset data-role="controlgroup" data-type="horizontal"> 
      <input type="radio" name="radio-view" id="radio-view-a" value="aa" /> 
      <label for="radio-view-a">A1</label> 
      <input type="radio" name="radio-view" id="radio-view-b" value="bb" /> 
      <label for="radio-view-b">B1</label> 
     </fieldset> 
     </div> 
    </div> 

    <div class='floatleft bigselect'>  
     <select name="select-choice-0" id="select-choice-1" data-inline="true" class=' '> 
     <option >SM1</option> 
     <option value="standard">Standard: 7 day</option> 
     </select> 
    </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 data-role="fieldcontain" class= 'forceinline'> 
     <div class='floatleft closespacing'>  
     <fieldset data-role="controlgroup" data-type="horizontal" data-mini='true'> 
      <input type="radio" name="radio-view" id="radio-view-a" value="aa" /> 
      <label for="radio-view-a">AA</label> 
      <input type="radio" name="radio-view" id="radio-view-b" value="bb" /> 
      <label for="radio-view-b">BB</label> 
     </fieldset> 
     </div> 
    </div> 

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

    <div class='floatleft closespacing'> 
     <select name="select-choice-2" id="select-choice-2" data-inline="true" data-mini='true'> 
     <option >SM2</option> 
     <option value="standard">Standard: 7 day</option> 
     </select> 
    </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 -->