0

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

在此处输入图像描述

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>
4

2 回答 2

1

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

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

于 2013-08-01T01:01:01.343 回答
0

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

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

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

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

输入{宽度：38%；向左飘浮;

}

于 2013-08-01T02:55:53.140 回答