<html>
<head>
<style>
</head>
<body>
<label>name:</label><input><br/>
<label>age:</label><input><br/>
<label>phone:</label><input><br/>
<label>address:</label><input><br/>
</body>
<head>
<style>
label { float: left; width: 10em; margin-right: 1em; text-align: right; }
/*以下方式也可以*/
/* label {display:inline-block; width: 10em; margin-right: 1em; text-align: right; }*/
</style></head>
<body>
<label>name:</label><input><br/>
<label>age:</label><input><br/>
<label>phone:</label><input><br/>
<label>address:</label><input><br/>
</body>
</html>
将label设置左浮动,label就会跑到左边,同时label会变成内联块(相当于display:inline-block)元素,就可以给label设置width属性。然后将label的文本内容设置为右对齐,这样就可以实现上图的效果。