html - 正确对齐 HTML 标签

Question

我是 HTML 对齐的新手。我有三个输入字段，但它们没有正确对齐。

<form>
username:<input type="text" name="username" value="ENTER NAME HERE" /><br>
id:<input type="text" name="id" value="ENTER ID HERE" /><br>
age:<input type="text" name="age" value="ENTER AGE HERE" />
</form>

请帮助我使用 colspan 或 rowspan 对齐，以便输入字段在另一个下方看起来不错。

Answer 1

试试这个..它可以作为 HTML 对齐虎钳正常工作

 <form>
<div style="width:300px">
<div style="float:left">username:</div><div style="float:right"><input type="text" name="username" value="ENTER NAME HERE" /></div><br>
<div style="float:left">id:</div><div style="float:right"><input type="text" name="id" value="ENTER ID HERE" /></div><br>
<div style="float:left">age:</div><div style="float:right"><input type="text" name="age" value="ENTER AGE HERE" /></div>
</div>
</form>

Answer 2

尝试这个：

<div id="userdata">
<div><label>Enter Name</label><input type="text" /></div>
<div><label>Enter Id</label><input type="text" /></div>
<div><label>Enter Age</label><input type="text"/></div>
</div>

Answer 3

在表格中使用它们：

<div id="userdata">
  <table>
    <tr>
        <td>Enter Name</td><td><input type="text" /></td>
    </tr>
    <tr>
        <td>Enter ID</td><td><input type="text" /></td>
    </tr>
    <tr>
        <td>Enter Age</td><td><input type="text" /></td>
    </tr>
  </table>
</div>