对齐表单输入框？

Posted 2023-03-05

【中文标题】对齐表单输入框？

【英文标题】：Aligning form input boxes?

【发布时间】：2013-05-12 17:43:55

【问题描述】：

我这里有一个例子：http://jsfiddle.net/3zSbt/

我不知道我是怎么把我的输入框和彼此的...

任何帮助将不胜感激。

HTML

<div id="contactContent">
 <form>
 Email: <input type="text" name="firstName">
 <br>
 Subject: <input type="text" name="lastName">
 </form>
</div>

CSS

#contactContent  margin-top: 50px; margin-left: 300px;
input  border: none; margin-left: 50px; margin-bottom: 30px; padding-right: 50px;

【问题讨论】：

方法有很多。这是example。

只要看起来像您的示例，无论如何都对我有用。你应该把它作为一个答案，这样我就可以检查它。 :)

【参考方案1】：

有很多方法。一种方法是将您的值名称放入label。示例：

HTML

<label>Email:</label><input type="text" name="firstName" />
<br />
<label>Subject:</label><input type="text" name="lastName" />

CSS

label
    display:inline-block;
    width:100px;

JSFiddle.

【参考方案2】：

如果您想使用 html，可以尝试将其放在表格中，或者如果您只想使用 CSS，您是否尝试过；

input 
    display:inline-block;
    float:left;

【讨论】：

试图避免使用表格。

很公平，但希望 CSS 是您的解决方案。