html - 如何在 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>

这就是我的源代码......它显示在左侧导航栏上方，但是我希望它显示在同一行，但它从来没有将它放在彼此下方。

谢谢。

Answer 1

1. 不要使用表格进行布局
2. 使用标签标签
3. 为两者分配样式float: left：标签和输入字段。然后在它们下方添加 clear （如果您对元素相互重叠有任何问题）。

替代方法是分配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>

小提琴链接。