Div标签以新行显示内容

Question

我的代码如下：

<h4 class="tableTotals">Total Selected: R<div id="bankTotal">##,##</div></h4>

我想要的输出应该都在一行中，但事实证明div标签在新行中显示它的内容，我并不完全想要。所以输出看起来像这样：

Total Selected: R
##,##

当我真的希望它显示如下：

Total Selected: R##,##

有人知道如何阻止在新线上显示div吗？ 感谢任何正确方向的推动！

Answer 1

使用<span>代替<div>

div是一个块元素，h4是一个用于单行的标题。

Answer 2

将div设置为inline-block

#bankTotal { display: inline-block; }

Demo

使用inline-block无需将div完全转换为inline元素，就像span一样。此外，您仍然可以拥有块属性。

Answer 3

<div> is a block element and will put a return before and after the <div>

你应该改用。

<h4 class="tableTotals">Total Selected: R<span id="bankTotal">##,##</span></h4>

Answer 4

使用CSS：

#bankTotal{
   display:inline;
}

Answer 5

div在新线上显示？

<div id="bankTotal" style="display:inline">##,##</div>

或

<div id="bankTotal" style="float:left">##,##</div>

但更好：

<span id="bankTotal"  >##,##</span >

Answer 6

用于显示div“inline”的css的

display:inline属性， 或者您可以使用<span>代码而不是<div>代码..

Answer 7

<h4 class="tableTotals" style="display:inline;">Total Selected: R<div id="bankTotal" style="float:left;">##,##</div></h4>

Answer 8

在这里，我添加了一种样式，可以手动将DIV定位到您想要的位置。请注意，我没有把它放在准确的位置，所以只是摆弄边缘PX。

<h4 class="tableTotals">Total Selected: R<div id="bankTotal" style="margin-left:50px;margin-top:-10px;">##,##</div></h4>