css - 输入文本对齐

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
}

查看演示 - jsfiddle