CSS - 与浮动右对齐答案

【问题标题】：CSS - Aligning Right with FloatsCSS - 与浮动右对齐
【发布时间】：2011-01-18 20:50:36
【问题描述】：

我对 CSS 还是很熟悉，拥有以下 CSS/HTML：

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

产生以下结果：

而不是期望的输出：

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

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

【问题讨论】：

标签： html css alignment css-float

【解决方案1】：

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

试试这个：

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

【讨论】：

【解决方案2】：

将它们放在容器 div 中并浮动，对吗？

【讨论】：

没有反对地役权，但他的回答只是一种解决方法。 Mauro 和其他人的以下答案实际上提供了对 float:right 行为方式的洞察。在某些时候，您实际上可能需要知道这一点。

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

“float”参数将项目尽可能向右发送，直到它碰到另一个浮动元素。因此，第一个按钮（清除）向右移动，直到它碰到包含它的框的边缘。第二个按钮尝试做同样的事情，但被已经存在的清除按钮停止，所以停在它的左边。

这可能是违反直觉的，因为如果您将它们浮动到右侧，项目最终会反转，但是如果您将它们浮动到左侧，它们最终的顺序与您浮动它们时的顺序相同。因此，与其从左到右考虑 float 将如何根据代码中的顺序排列，不如从外到内考虑。

【讨论】：