如何使标签贴在CSS的输入框旁边

Question

我的网站上有一个表单，我将输入框对齐到右侧，使表单整齐有序。

但是，每次我将表单设置为

input[type=text]{align:right}

标签全部聚集在表单的顶部。关于JSfiddle的问题..：

http://jsfiddle.net/4hX4g/

如果有人知道如何解决这个恼人的问题或者能指出我正确的方向，请做。谢谢。

Answer 1

只需将显示定义为inline-block，然后为width定义label：

label, input[type=text] {
    display: inline-block;
}

label {
    width: 10em;
    /* other CSS unchanged */
}

JS Fiddle demo

inline-block的使用是允许元素显示inline（因此在同一行上彼此相邻），但也以允许它们具有用。定义。默认情况下，input通常为inline-block，因此您可以轻松地将以下两行添加到label声明中：

label {
    display: inline-block;
    width: 10em;
    /* other CSS unchanged */
}

JS Fiddle demo

保留上述CSS，您还可以删除表示<br />标记，只需使用CSS：

label, input {
    float: left;
}

input[type=text] + label {
    clear: left;
}

JS Fiddle demo

另请注意，input元素是void / empty元素;并且是自动关闭的：<input />，不是 <input></input>，最终的演示程序会更正HTML，前两个会使其未经校正（而且，老实说，不会被注意）。

Answer 2

执行此操作的最佳方法是将此字段放在divs。

中

Here is an working example.