Question

我的h1和floating元素

存在问题

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

Chrome可以很好地显示结果，但不会显示firefox .. page number文本位于我的幻灯片图片中。

这是我的jsfiddle

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

有人能帮助我吗？

Thansk

Answer 1

尝试删除

white-space: nowrap;

来自CSS的

#slide-container

<强> DEMO FIDDLE

Answer 2

这里有一个jsFiddle：http://jsfiddle.net/89dQr/。

更新了CSS代码

#page-count{
  float: right;
}

.break {
  clear: both;
}

h1{
  float: left;
}

Answer 3

如果您要使用“section”标签，则需要指定宽度。否则我建议使用DIV标签。我相信你的iissue是一个section标签没有宽度，也没有根据内容调整大小。

有关float + section标签的信息，请参阅“how to float the section tags in html5”。

Answer 4

你只需要包装你的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>

Answer 5

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

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

firefox中的浮动元素问题

5 个答案: