輸入文本對齊

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

包裹內label元素與div的，和你輸入的文字變成另一組的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