65

我有一个 HTML 表单，例如：

 <html>
  Name:<input type="text"/></br>
  Email Address:<input type="text"/></br>
  Description of the input value:<input type="text"/></br>
 </html>

现在标签都从同一列开始，但文本框根据标签的文本长度在不同的位置开始。

有没有办法对齐输入字段，使得所有“：”和文本框都从同一位置开始，并且前面的文本将右对齐，直到“：”？

如果可以帮助实现这一点，我可以使用 CSS。

4

7 回答 7

105

工作 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;
}
于 2012-06-03T07:56:55.937 回答
25

您可以使用标签（请参阅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>
于 2012-06-03T07:38:34.517 回答
6

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

使用 display table-cell/row 无需任何宽度即可完成这项工作。

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;
}
于 2014-10-23T08:51:33.940 回答
3

在表单元素上设置宽度（应该存在于您的示例中！）并浮动（并清除）输入元素。另外，删除 br 元素。

于 2012-06-03T07:43:39.837 回答
1

就我而言，我总是把这些东西放在 ap 标签中，比如

<p> name : < input type=text /> </p>

依此类推，然后应用css

p {
  text-align:left;
}

p input {
  float:right;
}

您需要指定 p 标签的宽度。因为输入标签会一直向右浮动。

这个 css 也会影响提交按钮。您需要覆盖此标签的规则。

于 2012-06-03T08:13:11.803 回答
1

我知道这种方法以前已经采取过，但是我相信使用表格可以轻松生成布局，尽管这可能不是最佳实践。

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;
}
于 2013-07-09T03:51:56.893 回答
0

我刚刚为 Label 提供了宽度，并且输入类型已自动对齐。

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>

于 2015-06-26T15:25:30.793 回答