firefox中的浮动元素问题

Floating element issue in firefox

本文关键字：元素 问题 firefox      更新时间：2024-02-26

我的h1和floating元素有问题

我希望page number h1元素在presentation文本的右侧对齐。

Chrome可以很好地显示结果，但不能显示firefox。。CCD_ 5文本在我的一个幻灯片图像内。

这是我的jsfiddle

http://jsfiddle.net/A3RXg/3/

有人能帮我吗？

Thansk

在此处执行jsFiddle：http://jsfiddle.net/89dQr/.

更新的CSS代码

#page-count{
  float: right;
}
.break {
  clear: both;
}
h1{
  float: left;
}

尝试删除

white-space: nowrap;

来自的CSS

#slide-container

演示FIDDLE

如果要使用"section"标记，则需要指定宽度。否则，我建议使用DIV标记。我相信你的iissue是section标记没有宽度，也不会根据内容调整大小。

有关float+section标记的信息，请参阅"如何在html5中浮动section标记"。

您只需包装h1

<div style="float:left; width:300px;">
    <h1>Presentation</h1>
</div>
<div style="float:left">
    <h1 >page number</h1>
</div>
<div style="clear:both"></div>

Firefox拒绝将浮动元素与存在于同一父元素下的非浮动元素内联显示。（Firefox总是对浮动元素使用display:block;。）

在父元素上使用position:relative;并对h1使用绝对定位，或者同时浮动"Presentation"answers"page number"。

相关文章：