水平显示html表单输入

我正在尝试重新创建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" />

电子邮件：
密码：

我试着把他们分开， 在css中使用float:left和唯一类 但是代码实在太乱了，太长了。 所以本质上，我想知道是否有一种简单的方法可以用html和css实现这种布局

---

谢谢你的时间

只需将

display:inline

添加到输入元素，如图所示

此CSS应该可以工作，尽管我还没有测试：

input { display: inline; }

这是我的解决方案：（）

HTML:

---

我还建议您将标签封装在

标记中。你甚至可以使用

for=“inputId”

属性，这样点击标签就可以聚焦输入了。

虽然已经有了被接受和被投票的答案，但我只想提供一种方法，使表单在没有任何CSS的情况下保持水平。使用HTML表格是制作水平表单的有效方法

示例1:

名字
姓

示例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表单就像是强迫自己成为我们想要的样子。谢谢。

你的东西怎么了？ops我的错，我的分区宽度对于输入来说太小了，lulzAt至少要选择一个答案，下次在发布一个question@iuliux我不能在贴出一个问题后马上选择一个答案。那很简短

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

<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>

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