html - 提交按钮四处移动 - 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 元素上使用 overflow:hidden。

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