0

我正在使用 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. 如何解决？

谢谢！

4

2 回答 2

1

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

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

于 2013-01-20T05:28:14.820 回答
0

添加clear:both到您的第一次休息。

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

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

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

请参阅http://css-tricks.com/the-how-and-why-of-clearing-floats/

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

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

于 2013-01-20T05:34:06.207 回答