Question

需要在HTML页面中对齐文本蚂蚁输入文本框。我不会在Name之后计算空格以使其与Surname相同。这样做的正确方法是什么？

我有：

Name INPUT_BOX
Surname INPUT_BOX

我需要：

Name    INPUT_BOX
Surname INPUT_BOX

HTML code：

Name <input value ="aaa" >
<br>
Surname <input value = "bbb" >

我应该使用CSS还是HTML就足够了？

Answer 1

http://jsfiddle.net/gaka0yt0/

最简单的变体是

<div>
    <label> Name </label> <input value ="aaa" >
</div>

label 
{
    display: inline-block;
    min-width: 100px;
}

Answer 2

根据您的要求，请查看此示例表单

body{
font-family:Arial, Helvetica, sans-serif;
font-size: 13px;
}
.content{
padding:10px;
width:370px
}
.left{
width:150px;
float:left;
padding:7px 0px 0px 7px;
min-height:24px;
}
.right{
width:200px;
float:left;
padding:5px;
min-height:24px;
}
.clear{
float:none;
clear:both;
height:0px;
}
.row{
background-color:none;
display:block;
min-height:32px;
}
.text{
width:190px;
}
.ruler{
width:400px; border-bottom:dashed 1px #dcdcdc;
}
tr:focus{
background-color:#fcfcf0;
}
td{
vertical-align:top;
}
.over{
background-color:#f0f0f0;
}
.out{
background-color:none;
}

<!DOCTYPE html>
<html>
<body>
<form>
   <h3>Sample web form</h3>
<div class="content">
<div class="row">
<div class="left">Name</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">Surname</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">Email</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">Password</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
</div>
<hr />


</form>
</body>
</html>

对齐页面上的元素

2 个答案: