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>

それは私が持っているソース コードです...左側の 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>

フィドルリンク。