提交按钮移动 - CSS HTML答案

【问题标题】：Submit button moves around - CSS HTML提交按钮移动 - CSS HTML
【发布时间】：2013-01-20 04:36:43
【问题描述】：

我正在使用 Rails 创建一个简单的电子商务应用程序。我在每个产品页面上都有一个表单，允许用户为该产品选择多种颜色变体，然后是一个简单的添加到购物车按钮。

问题是，在两个不同的页面上，按钮出现在两个不同的地方，而代码却完全相同。

这是第一个示例，它只显示了三个变体，并且按钮出现在这些变体下，就像它应该的那样

生成这个的html如下（jsfiddle代码示例这里http://jsfiddle.net/zYAVW/）

<form accept-charset="UTF-8" action="http://192.168.1.113:3000/orders/populate" method="post">    
<ul> # A bunch of styled list elements # </ul>
<br><br>
<button type="submit">Add to cart</button>
</form>

但在我的另一个页面上，我有大约 85 个列表元素，按钮与样式列表元素内联显示，但使用完全相同的代码，按钮或表单没有 css 样式，我无法弄清楚无论如何，让它留在列表中。

这是第二页的图片

（此处为jsfiddle代码示例http://jsfiddle.net/zBAMN/）

有谁知道

为什么会这样？
如何解决？

谢谢！

【问题讨论】：

尝试在按钮上添加 clear:both 和 display:inline-block。
@intelis 什么都不做...
您在问如何在不发布任何 CSS 的情况下解决 CSS 问题。试着在 jsfiddle.net 上做一个例子。 jsfiddle.net/SAYuk
@mrtsherman 这是第一页 jsfiddle.net/zYAVW 和第二页 jsfiddle.net/zBAMN 的示例，我减少了第二页的颜色块大小，因为我的屏幕分辨率迫使添加按钮到新行，如果您的显示器不这样做，则将宽度增加到 150 像素
jsfiddle.net/zBAMN/2 将溢出隐藏添加到 ul 元素

标签： html css forms layout

【解决方案1】：

在 ul 元素上使用 overflow:hidden。

JSFiddle：http://jsfiddle.net/zBAMN/3/

【讨论】：

@mrtsherman 是的。另外我应该指出，任何在 ul 元素之外的代码，比如下拉菜单等，都将不可见。

【解决方案2】：

将clear:both 添加到您的第一个休息时间。

<br style="clear:both;"><br><button type="submit">Add to cart</button>

http://jsfiddle.net/zBAMN/4/

了解发生这种情况的原因很重要。您选择将列表元素向左浮动，以便它们排成一行。您需要清除此浮动，否则以下元素将无法恢复典型的文档流。您可以通过插入具有clear: both 样式属性的元素来显式清除浮动。

见http://css-tricks.com/the-how-and-why-of-clearing-floats/

正如 intelis 指出的，您还可以将 overflow: hidden 添加到父元素。这会导致它在您关闭父标签后自行清除。

见http://css-tricks.com/snippets/css/clear-fix/

【讨论】：