Question

我正在制作一个应用程序，我希望句子在一行上。但是，现在它们都是分开的。我将附上一张关于它现在如何看的图片的链接。

更新：我已按要求添加了整个代码。

<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是块元素。使用内联元素 span 而不是div。

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

Answer 2

div是块元素，默认显示在新行上。

将其更改为span：

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

或以内联方式显示：

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

在这种情况下，使用span会更好

Answer 3

<div>是块级元素。它将通过在文档中创建新块来显示其中的内容。如果要在一行中显示<div>标记中的内容，则需要添加额外的样式。

最好的替代方法是使用<span>代替。

<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>

句子分成两部分

3 个答案: