html - 在同一行显示 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">

目前，它显示如下：

Label Label Input Input

我希望它这样做：

Label Input Label Input

有任何想法吗？我需要提供更多代码吗？

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; }

Answer 1

因此，通过您更新的问题，解决起来非常简单。当您float在元素上使用时，它会脱离内联元素的正常定位。这意味着，标签在左侧具有更高的优先级。这就是你得到这个输出的原因：标签、标签、输入、输入。当您还添加float到输入字段时，将恢复原始顺序。或者，当只使用inline- 或 -inline-block元素时，您可以构建很多而不需要浮动元素。所以在你的情况下，你也可以简单地改变这个：

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

对此：

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

Answer 2

好吧，当我添加 css 时，我决定尝试一下。

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

似乎解决了这个问题，但我不知道为什么。如果有人能解释一下，那就太好了。

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>