css - 如何让标签在 CSS 中的输入框旁边

Question

我的网站上有一个表格，我将输入框向右对齐，以使表格整洁有序。

但是，任何时候我将表单设置为

input[type=text]{align:right}

标签都聚集在表格的顶部。JSfiddle 上的问题..：

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

score 3 · Accepted Answer

只需将显示定义为，并为inline-block定义 a ：widthlabel

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

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

的用途inline-block是允许元素显示inline（因此在同一行上彼此相邻），而且还允许它们具有定义的with。Aninput通常inline-block默认情况下，因此您可以类似地，只需将以下两行添加到label声明中即可：

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

保留上面的 CSS，您还可以删除演示<br />标签，并简单地使用 CSS：

label, input {
    float: left;
}

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

另请注意，该input元素是 void/empty 元素；并且是自动关闭的：<input />，不是 <input></input>，最后的演示纠正了 HTML，前两个没有纠正它（老实说，没有注意到）。

score 2 · Accepted Answer

2

最好的方法是将此字段放在divs.

于 2013-05-21T22:31:49.157 回答

2 回答 2