将字段集元素定位在其他元素下答案

【问题标题】：Positioning Fieldset Elements Under Others将字段集元素定位在其他元素下
【发布时间】：2013-08-01 00:48:30
【问题描述】：

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

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>

【问题讨论】：

标签： css html forms format fieldset

【解决方案1】：

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

您可以通过删除输入浮点数（使其显示为块）或带有标签的clear: left 来解决此问题。

【讨论】：

我从输入字段中删除了 float: left ，但这并没有解决它。我将“float：left”添加回输入并在第二个标签上设置“clear：left”，但现在两个标签都在左侧，两个输入都在它们的右侧。它更好，但仍然不是我想要的。
input, label {display: block;}

【解决方案2】：

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

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

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

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

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

}

【讨论】：