水平显示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， 使用float：在css中留下一个唯一的类 但是代码实在太乱了。 基本上，我想知道是否有一种简单的方法可以用html和css实现这种布局。

感谢您的时间！

Answer 1

这个CSS应该可行，但我还没有测试过：

input { display: inline; }

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"属性，以便单击标签可以使输入成为焦点。

Answer 3

只需将display:inline添加到输入元素，如图here

所示

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/class 可能不起作用，有时它们可​​能会发生冲突；但是使用 HTML 表格来制作 HTML 表单就像强迫成为我们想要的样子。谢谢。