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>

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

3 个答案: