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

时间:2013-11-28 13:56:08

标签: html css

我有这个简单的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/

5 个答案:

答案 0 :(得分:3)

将您<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>总是更好的选择,以同一行(和不同的风格)显示! :)

答案 1 :(得分:2)

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

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

答案 2 :(得分:2)

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

它适用于&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/

答案 3 :(得分:1)

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

答案 4 :(得分:0)

尝试这个小提琴:

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

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