将Fieldset元素定位在其他元素下

Question

我下载了一个网站模板，我试图对其部分显示方式进行一些更改。对于大多数输入框，默认格式是正常的，但是当尝试进行一些小的更改时，我会完全破坏它。

IP分配字段很好。对于Inventory我试图将Fieldsets组合在两个框之间没有间隙，但是我做的任何更改都会导致这个破碎的CSS。红线表示我期待它们的位置，但无法弄清楚如何正确定位它们。

                <fieldset style="width:30%; float:left; margin-left: 19%; margin-right: 2%;"> <!-- to make two field float next to one another, adjust values accordingly -->
                    <label>IP Allocation</label>
                    <input type="text" style="width:92%;">
                </fieldset>
                <fieldset style="width:30%; float:left;"> <!-- to make two field float next to one another, adjust values accordingly -->
                    <label>IP Allocation</label>
                    <input type="text" style="width:92%;">
                </fieldset><div class="clear"></div>

                <p><div align="center"><h2>Inventory</h2></div><p>

                <fieldset style="width:62%; float:left; margin-left: 19%;"> <!-- to make two field float next to one another, adjust values accordingly -->
                    <label>Type</label>
                    <input type="text" style="width:25%; float:left; margin-right: 2%;">
                    <label>Item</label>
                    <input type="text" style="width:25%; float:left;">
                </fieldset><div class="clear"></div>

更新

在对代码和样式进行一些修改之后，我能够使它接近目标布局。但是，做2个标签然后输入2个是“合法的”吗？这可以更准确地固定到位置吗？

                <fieldset style="width:62%; float:left; margin-left: 19%;"> <!-- to make two field float next to one another, adjust values accordingly -->
                    <label style="width:45%;">Type</label>
                    <label style="width:45%;">Item</label>
                    <input type="text" style="width:45%; clear: left;">
                    <input type="text" style="width:45%;">
                </fieldset><div class="clear"></div>

Answer 1

您不必浮动输入元素，因为它们包含在浮动字段集中。

您可以通过删除输入浮点数（因此显示为块）或clear: left标记来解决此问题。

Answer 2

删除所有内联样式并执行以下操作：

注意：我从输入的宽度稍微修剪一下以补偿输入的边框

[http://jsbin.com/ohajox/1/] [1]

  

标签{宽度：10％;向左飘浮; }

     输入{宽度：38％;浮动：左;

     

}