我下载了一个网站模板,我正尝试对其部分显示方式进行一些更改。默认格式适用于大多数输入框,但在尝试进行一些小的更改时,我完全打破了它。
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>
最佳答案
您不必 float 输入元素,因为它们包含在 float 字段集中。
您可以通过删除输入 float (因此它显示为 block )或带有标签的 clear: left
来解决这个问题。
关于css - 将字段集元素定位在其他元素下,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17983474/