我有这个简单的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/
答案 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>
我添加了一些颜色来识别。
答案 3 :(得分:1)
浮动元素总是让它们显示:阻止,无论你定义什么。 (查看firebug或任何其他开发人员工具以获取显示值)您是否可以控制标记?然后将“Daddy,Yankee”文本包裹在一个额外的元素中,让它向左浮动。
答案 4 :(得分:0)