在同一行显示2个标签和输入框

Question

这里有一些示例代码。

<label for="input1">input1</label>
<input id="input1" name="input1" type="text" required>
<label for="input2">input2</label>
<input id="input2" name="input2" type="date">

当前，它的显示效果是这样的：

标签 标签 输入框 输入框

我希望它显示成这样：

标签 输入框 标签 输入框

有什么想法吗？我需要提供更多的代码吗？

CSS

label { cursor: pointer; width: 250px; display: block; float: left; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

- Sumico

---

当添加到空白的HTML页面中时，它就像是一行中的“标签输入标签输入”。也许可以添加一些更多的HTML结构和相关样式来弄清楚问题出在哪里。 - insertusernamehere

好的，在我添加 CSS 的时候，我决定尝试一些东西。'input[type="text"]，input[type="date"]{ float: left; }'似乎解决了问题，但我不知道为什么。如果有人能解释一下，那就太好了。 - Sumico

Answer 1

所以，根据您更新的问题，解决起来非常简单。当您在元素上使用float时，它会被移出内联元素的正常定位。这意味着标签更有可能位于左侧。这就是为什么输出结果是：label、label、input、input。当您还将float添加到输入字段中时，原始顺序将恢复。或者，当仅使用inline或inline-block元素时，您可以构建很多内容而无需浮动元素。因此，在您的情况下，您也可以简单地更改为：

label {
    […]
    display: block;
    float:   left;
}

转换为：

label {
    […]
    display: inline-block;
}

- insertusernamehere

Answer 2

好的，在我添加 CSS 的时候，我决定尝试一些东西。

input[type="text"], input[type="date"]{ float: left; }

看起来解决了问题，但我不知道为什么。如果有人能解释一下，那就太好了。

- Sumico

---

你所做的正是我在答案中解释的。你让所有元素浮动以恢复“预期”的顺序。 - insertusernamehere

Answer 3

<table>
<tr>
<td><label for="input1">input1</label></td>
<td><input id="input1" name="input1" type="text" required></td>
<td><label for="input2">input2</label></td>
<td><input id="input2" name="input2" type="date"></td>
</tr>
</table>

- kakarott

---

如果可以避免的话，我宁愿不使用表格。我会在原始帖子中添加一些CSS。 - Sumico