Question

我仍然非常擅长CSS，拥有以下CSS / HTML：

<input type="reset" value="Clear" style="float: right;" />
<input type="submit" value="Send" style="float: right;" />

产生以下结果：

alt text http://i49.tinypic.com/10wtjdi.png

而不是所需的输出：

alt text http://i47.tinypic.com/acblzm.png

更改HTML元素的顺序似乎可以解决问题，但也是违反直觉的。

这类问题的一般解决方案是什么？

Answer 1

它们按照遇到的顺序浮动，第一个项目浮动到最右边，然后下一个项目立即浮动。

试试这个：

<div style="float: right;">
<input type="reset" value="Clear" style="float: left;" /> 
<input type="submit" value="Send" style="float: left;" /> 
</div>

Answer 2

把它们放在一个容器div中并向右漂浮？

Answer 3

<div style="float:right;">
  <input type="reset" value="Clear" />
  <input type="submit" value="Send" />
</div>

Answer 4

据我所知，在处理浮点数时，元素在文档中出现的顺序（或者更确切地说是解析它们的顺序）非常重要。第一个元素首先进行布局，然后是下一个元素然后......

Answer 5

“float”参数尽可能地将项目发送到右侧，直到它到达另一个浮动元素。因此，第一个按钮（清除）向右移动，直到它到达包含它的框的边缘。第二个按钮尝试执行相同操作，但已经由清除按钮停止，因此仅停在其左侧。

这可能是违反直觉的，因为如果将它们向右浮动，项目最终会反转，但如果将它们浮动到左侧，则它们会以浮动它们时的顺序结束。因此，不必从左到右思考浮点数如何根据代码中的顺序排列，你必须从外到内思考。

CSS - 与浮动对齐

5 个答案: