通过以下方式alignmentHTMLinput字段：
我有一个HTML表单，如：
<html> Name:<input type="text"/></br> Email Address:<input type="text"/></br> Description of the input value:<input type="text"/></br> </html> 现在标签全部从同一列开始，但是文本框根据标签的文本长度从不同的位置开始。
有没有一种方法来alignmentinput字段，使得所有的“：”和文本框将从相同的位置开始，并且前面的文本将直到“：”alignment。
如果可以帮助实现这一点，我可以使用CSS。
工作JS小提琴
HTML：
<div> <label>Name:</label><input type="text"> <label>Email Address:</label><input type = "text"> <label>Description of the input value:</label><input type="text"> </div>
CSS：
label{ display: inline-block; float: left; clear: left; width: 250px; text-align: right; } input { display: inline-block; float: left; }
你可以使用一个标签（见JsFiddle ）
CSS
label { display: inline-block; width: 210px; text-align: right; }
HTML
<html> <label for="name">Name:</label><input id="name" type="text"><br /> <label for="email">Email Address:</label><input id="email" type="text"><br /> <label for="desc">Description of the input value:</label><input id="desc" type="text"><br /> </html>
或者你可以在表中使用这些标签（ JsFiddle ）
<html> <table> <tbody> <tr><td><label for="name">Name:</label></td><td><input id="name" type="text"></td></tr> <tr><td><label for="email">Email Address:</label></td><td><input id="email" type = "text"></td></tr> <tr><td><label for="desc">Description of the input value:</label></td><td><input id="desc" type="text"></td></tr> </tbody> </table> </html>
在表单元素上设置一个宽度（在你的例子中应该存在！）并且浮动（并清除）input元素。 另外，删除br元素。
我知道这个方法之前已经被采用了，但是我相信使用表格，布局可以很容易地生成，虽然这可能不是最好的实践。
的jsfiddle
HTML
<table> <tr><td>Name:</td><td><input type="text"/></td></tr> <tr><td>Age:</td><td><input type="text"/></td></tr> </table> <!--You can add the fields as you want-->
CSS
td{ text-align:right; }
在我的情况下，我总是把这些东西放在ap标签中
<p> name : < input type=text /> </p>
等等，然后应用这个CSS
p { text-align:left; } p input { float:right; }
您需要指定p标签的宽度，因为input标签会一直浮动。
这个CSS也会影响提交button。 您需要覆盖此标记的规则。
我刚刚给了标签的宽度和inputtypes自动alignment。
input[type="text"] { width:100px; height:30px; border-radius:5px; background-color: lightblue; margin-left:2px; position:relative; } label{ position:relative; width:300px; border:2px dotted black; margin:20px; padding:5px; font-family:AR CENA; font-size:20px; }
<label>First Name:</label><input type="text" name="fname"><br> <label>Last Name:</label><input type="text" name="lname"><br>
使用显示表格单元格/行将不需要任何宽度的工作。
html：
<html> <div> <div class="row"><label>Name:</label><input type="text"></div> <div class="row"><label>Email Address:</label><input type = "text"></div> <div class="row"><label>Description of the input value:</label><input type="text"></div> </div> </html>
Css：
label{ display: table-cell; text-align: right; } input { display: table-cell; } div.row{ display:table-row; }
