水平显示 html 表单输入答案

【问题标题】：displaying html form inputs horizontally水平显示 html 表单输入
【发布时间】：2011-08-23 15:49:09
【问题描述】：

我正在尝试重新创建显示在 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 实现这种布局。

感谢您的时间！

【问题讨论】：

你有什么问题？ jsfiddle.net/2LYuX
糟糕，该部分的 div 宽度对于输入 lulz 来说太小了
至少选择一个答案，下次在发布问题之前再深入一点
@iuliux 我发布问题后无法立即选择答案..

标签： html css forms input

【解决方案1】：

虽然已经有接受并投票赞成的答案，但我只是想贡献一种方法来使表单水平而不需要任何类型的 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 表单就像是强制成为我们想要的样子。谢谢。

【讨论】：

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

【讨论】：

【解决方案3】：

这个 CSS 应该可以工作，虽然我还没有测试过：

input { display: inline; }

【讨论】：

简短而整洁

【解决方案4】：

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

【讨论】：