css - 将字段集元素定位在其他元素下

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

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

您可以通过删除输入 float (因此它显示为 block )或带有标签的 clear: left 来解决这个问题。