水平显示HTML表单输入

Question

我正在尝试重新创建 Tinypic 主页上显示的登录表单。

在 HTML 中，我有以下 3 个元素：

E-Mail:
<input type="text" name="id" maxlength="30" value="" />
Password:
<input type="text" name="pw" maxlength="30" value="" />

<input type="submit" name="submit" value="Login" />

我尝试将它们放入不同的div中，使用CSS中的float:left和唯一类，但代码非常混乱且过长。

因此，我想知道是否有一种简单的方法通过HTML和CSS实现这种布局。

感谢您的时间！

- Kevin Jung

---

你的问题出在哪里？http://jsfiddle.net/2LYuX/ - mellamokb

哎呀，我的错，我那个部分的div宽度对于输入框来说太小了。 - Kevin Jung

至少选择一个答案，下次在发布问题之前请深入了解一下。 - Iulius Curt

@iuliux 我发完问题后不能立即选择答案。 - Kevin Jung

Answer 1

这个 CSS 应该可以工作，尽管我没有测试过：

input { display: inline; }

- Brian Driscoll

---

那很简短而整洁。 - canbax

Answer 2

这是我的解决方案: (http://jsfiddle.net/HcppN/)

HTML:

<label>E-Mail:</label>
<input type="text" name="id" maxlength="30" value="" />
<label>Password:</label> 
<input type="text" name="pw" maxlength="30" value="" />

<input type="submit" name="submit" value="Login" />

CSS：

input, label {
    float:left;
    margin:5px;
}

我还建议您将标签封装在 <label> 标签中。您甚至可以使用 for="inputId" 属性，这样单击标签会将输入框聚焦。

- Iulius Curt

Answer 3

只需将display:inline添加到您的输入元素中，如此处所示

- Thomas Shields

Answer 4

虽然已经有被接受和投票的答案，但我想贡献一种不需要任何CSS就可以使表单水平的方法。使用HTML表格是一种有效的方法来制作水平表单。

示例1：

<table>
 <tr>
   <td>First Name</td>
   <td><input type="text" name="fname" > </td>
 </tr>

 <tr>
   <td>Last Name</td>
   <td><input type="text" name="lname" > </td>
 </tr>
</table>

</form>

例子2：

<form method="">
    
    <table>
     <tr>
       <td><input type="text" name="fname" ></td>
     
       <td><input type="text" name="lname" ></td>
        
       ........................
     </tr>
    </table>
    
</form>

我的经验告诉我，在不同的情况下，CSS/类可能无法正常工作，有时它们可能会发生冲突；但是使用HTML表格制作HTML表单就像是强制让它看起来像我们想要的样子。谢谢。

- anazititís gnósis