如何让 <form> div 正确包装我的两个 <input type="button"> 按钮？答案

【问题标题】：How can I get the <form> div to properly wrap my two <input type="button"> buttons?如何让 <form> div 正确包装我的两个 <input type="button"> 按钮？
【发布时间】：2011-03-23 07:17:22
【问题描述】：

由于某种原因，我的 Submit 和 Cancel 按钮没有像我期望的那样被包裹在 form 标记中 (当我将它们的 float 属性分别设置为 right 和 left .这两个按钮位于最右侧和左侧的表单 div 的外侧和下方。

链接到HTML & embedded CSS

alt text http://lh5.ggpht.com/_rNlSpSUBkYo/TFLpNgv4XkI/AAAAAAAAAE8/ocwa0uSzwX4/reply-float-form.png

如何使表单 div 包裹两个按钮，使它们不会出现在表单 div 的外部和下方？

谢谢
亚当

【问题讨论】：

仅供参考 - 为了保持有效，您不应重复元素 ID。如果您希望样式相同，请使用类。此外，可以使用多个类名，例如class="按钮提交"。您可以使用 .buttons、.submit 或 .buttons.submit（无空格）定位此元素。

标签： html css forms button css-float

【解决方案1】：

删除.cancels 浮动规则：

.cancel{/* no float */}

*在 Chrome 上测试

【讨论】：

是的，这确实有效。你能解释一下为什么会这样吗？逻辑上不是说它应该与设置了浮动的按钮一起使用吗？还是放置一个 float:left 已经是非浮动项目的固有行为，而包含它只是过度杀伤它？
给出一个 float:left/right 样式将元素从“盒子”中取出，使其失去一些继承的样式。删除float:left 样式会将元素放入“框”内，它还覆盖float:right 元素。

【解决方案2】：

看起来你需要清除浮动。试试这个。

<form action="#" method="get">
    <textarea name="Reply Textarea" type="text" rows="2" cols="40" wrap="soft"></textarea>
    <input id="buttons" class="submit" type="submit" value="Submit" />
    <input id="buttons" class="cancel" type="button" value="Cancel">
    <br style="clear: both;" />
</form>

【讨论】：

是的，就可以了。需要清除浮动元素的原因是，一旦您浮动某些东西，它就不再与其父容器（除非它也是浮动的）或标记中进一步向下的任何其他非浮动元素交互。清除停止。
我只是想确保我理解为什么会发生这种情况和/或这是我遇到的 CSS 错误。
不，这不是 CSS 错误，它是根据定义。请参阅上面的 Pat 评论。
@Pat 感谢您的解释 @durilai 感谢您举例回答。一样东西。当“提交”按钮应用了“浮动：右”但“取消”按钮没有应用浮动时，它是如何工作的？
@durilai 它之所以起作用，是因为取消按钮仍在正常的文档流中，因此与它的非浮动父级（表单）交互。当我开始考虑浮动元素的“行”时，一些帮助我掌握了它的东西。如果您将所有元素浮动在一行中（即您浮动两个按钮），则没有任何东西可以与表单交互，并且它会折叠在按钮上方，因为就它而言，那里没有元素（IE6 例外，它仍然允许非浮动父母会受到浮动孩子的影响，因为它讨厌编码）。