通过以下方式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> 

http://jsfiddle.net/T6zhj/1/

使用显示表格单元格/行将不需要任何宽度的工作。

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; }