在html中对齐文本框和文本/标签？

Question

我弄清楚了.如何对齐文本框？我以为使用float:左边的标签上左边(然后当我注意到输入现在在左边没有那个时在输入上做)但这是完全错误的.

如何让文本框与文本框旁边的标签对齐,而不是最左边？

图片是我希望它看起来像的一个例子.

替代文字

Answer 1

每个标签/输入对有两个左右框.两个盒子都在一排并且具有固定的宽度.现在,您只需将标签文本浮动到右侧即可text-align: right;

这是一个简单的例子:

弗洛伊德是一个无知的声明.表格具有特定的地方,可以很好地运作.CSS不是一个解决所有工具,如果你不能看到过去那个,不建议差的解决方案,你会让人伤害. (20认同)
@Jeremy我对网页设计的经验非常有限(一个月左右),但我的个人观点是表格应该像瘟疫一样避免(除了表格本身之外的任何东西).当然,这只是一个主观意见,但在那个月里我遇到了太多问题. (5认同)

Answer 2

使用表格将是一个(并且简单)选项.

其他选项都是关于设置固定宽度并使其与右侧文本对齐:

label {
   width: 200px;
   display: inline-block;
   text-align: right;
}

或者,正如所指出的那样,使它们全部浮动而不是内联.

Answer 3

你可以像这样做一个多div布局

<div class="fieldcontainer">
    <div class="label"></div>
    <div class="field"></div>
</div>

其中 .fieldcontainer { 清除：两者；} .label { 浮动：左；宽度：___ } .field { 浮动：左；}

或者，我实际上更喜欢这样的表格。这是非常多的表格数据，而且结果非常干净。两者都会起作用。