css - 切换填充会导致不寻常的布局更改

Question

我目前正在网站上工作 http://www.lovepotatoes.ovh3.microserveltd.co.uk/这个问题与食谱搜索 block 有关，它有一个下拉菜单和 3 个文本字段。

在 Firefox 中，它显示得很好，而在其他浏览器中，第二个文本输入的位置很奇怪。我注意到在 Firebug 中，如果我在文本标记中打开和关闭填充，那么 Firefox 也会表现出这种行为。

我需要做什么来解决这个问题并获得一个流畅的 2 行布局？对为什么会发生这种情况有什么一般性的解释吗？

Answer 1

如果您使用 ingredients 2 输入将此 style="clear:left;" 添加到 div，它应该可以工作。

<div class="form-item form-type-textfield form-item-field-ingredients-value-1"
style="clear:left;">
 <input type="text" class="form-text" maxlength="128" size="60" value=""
name="field_ingredients_value_1" id="edit-field-ingredients-value-1"
title="Ingredients 2" style="color: rgb(170, 170, 170);">
</div>