提交按钮移动-CSS HTML

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

问题是，在两个不同的页面上，按钮出现在两个不同的位置，而代码完全相同

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

生成此代码的html如下所示（这里是JSFIDLE代码示例）

#一组样式化的列表元素#



添加到购物车

但在我的另一个页面上，我有大约85个列表元素，按钮与样式化的列表元素内联显示，但使用完全相同的代码，按钮或表单没有css样式，我无法确定如何使其保持在列表下

这是第二页的图片

（这里是JSFIDLE代码示例）

有人知道吗

为什么会这样

如何修复它

---

谢谢

在

ul

元素上使用溢出：隐藏

---

jsiddle:

在第一次休息时添加

clear:two

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

添加到购物车

重要的是你要理解为什么会发生这种情况。您选择将列表元素向左浮动，以便它们成行排列。您需要清除此浮动，否则以下元素将无法恢复typicald文档流。通过插入具有

clear:both

样式属性的元素，可以显式清除浮点

看

正如intelis所指出的，您还可以向父元素添加

overflow:hidden

。这会使它在关闭父标记后自动清除

---

请参见

尝试在按钮上添加clear:both和display:inline块。@intelis什么都不做……您正在询问如何在不发布任何CSS的情况下解决CSS问题。尝试在jsfiddle.net上制作一个示例@mrtsherman这里是第一页和第二页的示例，我在第二页减小了colorbloc的大小，因为我的屏幕分辨率迫使添加按钮移到新行，如果您的显示器没有这样做，请将宽度增加回150px添加溢出隐藏到ulelement@mrtsherman对。我还应该指出，任何在ul元素之外的代码，比如下拉列表，都是不可见的。

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