如何在1行上放置2个输入框

Question

请问如何将这些输入框和Sumbit按钮放在同一行上？

<td id="header-right">
   <table>
      <tr>
         <td class = "Login-Bar"><div style = "width: 200px;">
            <form action = "Login.php" method = "post">
               Username: <input type = "text" name "Username" size = "10"> 
               Password: <input type = "text" name "Password" size = "10"> 
               <input type = "Submit">
            </form></div>
         </td>
      </tr>
   </table>
</td>

那就是我拥有的源代码...它显示在我的NavBar上方的左侧，但是我希望它显示在同一行上，但是它从来没有将其全部放在彼此下面。

谢谢。

Answer 1

1. 不要使用表格进行布局
2. 使用标签标签
3. 将样式float: left分配给标签和输入字段。 然后在它们下面添加清除（如果元素相互重叠存在任何问题）。

替代方法是将display: inline分配给输入字段。

Answer 2

您可以将此样式应用于表单：

form {
    display: inline-block;
    width: 400px; /* or whatever width makes it work for you */
}

Answer 3

试试这个为您的CSS。

input {
   float: left;
}

如果要增加一些间距。 你可以做这样的事情

input {
       float: left;
       margin-right: 5px;
}

Answer 4

将内部表定义更改为：

<form action="Login.php" method="post">
    <table>
        <tr>
            <td class="Login-Bar">
                Username:
                <input type="text" name "Username" size="10" /></td>
            <td class="Login-Bar">Password:
                <input type="text" name "Password" size="10" /></td>
            <td>
                    <input type="Submit" />
            </td>
        </tr>
    </table>
</form>

小提琴链接 。