提交按钮移动 - CSS HTML

Question

我正在使用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/）

有谁知道

1. 为什么会这样？
2. 如何解决？

谢谢！

Answer 1

在ul元素上使用溢出：隐藏。

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

Answer 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/

正如英特尔所指出的，您还可以将overflow: hidden添加到父元素。一旦关闭父标记，这会使其自我清除。

请参阅http://css-tricks.com/snippets/css/clear-fix/