尽管`display-inline`，为什么要将`p`附加到新行？

Question

我有这个简单的html标记：

<div class="autocomplete-suggestion" data-index="0">
    Daddy, Yankee
    <p class="zumba">
        1996-03-14
    </p>
</div>
.....

所以我的目标是将<p>与class="zumba"放在同一行，如文本Daddy, Yankee，但在右侧网站上：

我添加float-right以将其与正确的网站对齐，结果是什么。但不知怎的，它显示在一个新的行！

然后我补充道：

.zumba {float:right; display:inline}

但问题仍然存在！为什么？谢谢，在这里你可以测试你的想法： http://jsfiddle.net/kMuA6/

Answer 1

将您<p>更改为span

<强> HTML

<div class="autocomplete-suggestion" data-index="0">
    Daddy, Yankee <span class="zumba"> 1996-03-14 </span>
</div>

<强> CSS

.zumba {float:right;}

小提琴：http://jsfiddle.net/logintomyk/drLbx/

一般提示：如果它的文字不多，<span>总是更好的选择，以同一行（和不同的风格）显示！ ：）

Answer 2

他们有上下边距。这有效：

.zumba {float:right; display:inline; margin:0;}

Answer 3

你可以不使用任何漂浮物来做到这一点。

它适用于＆lt; P>和＆lt; SPAN＆gt;。

<div class="autocomplete-suggestion" data-index="0">
    Daddy, Yankee
    <span class="zumba">
        1996-03-14
    </span>
</div>

我添加了一些颜色来识别。

小提琴：http://jsfiddle.net/kMuA6/2/

Answer 4

浮动元素总是让它们显示：阻止，无论你定义什么。 （查看firebug或任何其他开发人员工具以获取显示值）您是否可以控制标记？然后将“Daddy，Yankee”文本包裹在一个额外的元素中，让它向左浮动。

Answer 5

尝试这个小提琴：

http://jsfiddle.net/kMuA6/1/

我刚使用<span>代替<p>