Question

我在第一个div上使用了 float：left ，以便标签和输入标签同时显示。但是正因为如此，两者之间没有空间了。我已经尝试了边距和填充两者，但是无法将它们分开。

<div style="float:left;">
            <label for="title">Title</label>
            <input style="height: 34px; width: 310px;" type="text" name="title">
        </div>
        <div>
            <label for="name">Name<label style="color: red;">*</label></label>
            <input style="height: 34px; width: 310px;" type="text" name="name" required>
        </div><br>

还有其他方法可以实现这一目标吗？

Answer 1

完全可以简单地包裹包装div的一侧。这是一个清理后的代码示例：

.left {
  float: left;
}
input {
  height: 34px;
  width: 150px;
}
.req {
  color: red;
}
.input-wrapper {
  padding-right: 20px;
}

<div class="input-wrapper left">
  <label for="title">Title</label>
  <input type="text" name="title" />
</div>
<div class="input-wrapper left">
  <label for="name">Name<span class="req">*</span></label>
  <input type="text" name="name" required />
</div>

我使输入字段的宽度变小只是为了说明它们确实以这种格式并排堆叠，同时创建了必要的分隔。

此外，请注意，您不应在标签内嵌套标签。如果要包括诸如必需的归档符号之类的内容，请改用诸如span之类的东西。要么在该标签上添加一个“必需”类，然后为::after伪类选择器设置样式。

Answer 2

获得预期结果的更好方法是在每个div上使用“ display：inline-block”，而不是使用“ float”。

mov

您可以在此处找到有关使用内联块与浮动的更多信息：
Advantages of using display:inline-block vs float:left in CSS

分隔2个输入标签，使用`float：left`并排显示

2 个答案: