输入文字对齐

Question

我有两个输入文字

<form action="process.php" method="get">
Link <input placeholder="Link" type="text" name="c">
<p>
<br>
Password <input placeholder="Password Admin" type="text" name="p">
<p>
<br>
<input type="submit">
</form>

结果：

如何在此模式下对齐？

像这样

Answer 1

使用div将您的文本换行到label个元素中，并将您的输入换成另一组div。那么容易修改他们的样式：

<form action="process.php" method="get" id="yourform">
    <div class="labels">
        <label for="c">Link</label>
    </div>
    <div class="inputs">
        <input placeholder="Link" type="text" name="c">
    </div>
    <div class="labels">
        <label for="p">Password</label>
    </div>
    <div class="inputs">
        <input placeholder="Password Admin" type="text" name="p">
    </div>
    <br>
    <input type="submit">
</form>

CSS：

.labels {
    width: 150px;
    text-align: right;
    float: left;
    margin-right: 5px
}

See the demo - jsfiddle