Satz in zwei geteilt

Question

Ich mache gerade eine App und ich möchte den Satz in einer einzigen Zeile sein. Jetzt sind sie beide getrennt. Ich werde einen Link an das Bild anhängen, wie es gerade aussieht.

Update: Ich habe den gesamten Code wie gewünscht hinzugefügt.

<div data-role="main" class="ui-content"> 
    <div class="ui-grid-a"> 
    <div class="ui-block-title title-a"><div id="lblFrom"></div></div> 
    <div class="ui-block-title title-b"><div id="lblTo"></div></div> 
    <div class=ui-block-a><input type="text" name="fromamount" id="fromamount" required /></div> 
    <div class=ui-block-b><input type="text" name="toamount" id="toamount" required /></div> 
    </div> 

    <p>You are currently converting <div id="lblConversioning"></div></p> 

    <input type="button" value="Conversion" id="btnConversion"> 

</div> 

https://imgur.com/a/asCIZ

Answer 1

div ist ein Blockelement . Verwenden Sie das Inline-Element span anstelle von div.

<p>You are currently converting <span id="lblConversioning"></span></p> 

Answer 2

div ist Blockelement und durch Standardanzeige auf neue Zeile.

ändern es zu spannen:

<p>You are currently converting <span id="lblConversioning"></span></p> 

Oder es angezeigt inline:

<p style="display: inline-block">You are currently converting <div style="display: inline-block" id="lblConversioning"></div></p> 

Mit span in diesem Fall besser ist

Answer 3

<div> ein Block-Element ist. Es würde den Inhalt darin anzeigen, indem ein neuer Block im Dokument erstellt wird. Sie müssen zusätzliches Styling hinzufügen, wenn Sie den Inhalt in <div> Tags in einer einzelnen Zeile anzeigen möchten.

Die beste Alternative ist stattdessen <span> zu verwenden.

<div data-role="main" class="ui-content"> 
    <div class="ui-grid-a"> 
    <div class="ui-block-title title-a"><div id="lblFrom"></div></div> 
    <div class="ui-block-title title-b"><div id="lblTo"></div></div> 
    <div class=ui-block-a><input type="text" name="fromamount" id="fromamount" required /></div> 
    <div class=ui-block-b><input type="text" name="toamount" id="toamount" required /></div> 
    </div> 

    <p>You are currently converting <span id="lblConversioning"></span></p> 

    <input type="button" value="Conversion" id="btnConversion"> 

</div>