Question

HTML文字和输入框在一起的时候排不整齐了

比如下面这段HTML，因为文字（Content、Location、Date）不一样长，怎么排整齐？是不是只能用table把它们放在一个不显示边框的表格里？
<CENTER>
<FORM action="/search/" method="post">
Content
<input type="text" name="contentSearch" style="width:400px"/><br/>
Location
<input type="text" name="locationSearch" style="width:400px"/><br/>
Date
<input type="text" name="dateSearch" style="width:400px"/><br/>
<input type="submit" value="Search"/><br/>
</FORM>
</CENTER>
我本来是想把文字放在一个部件里，然后设置固定的宽度，有类似这样的部件吗？

Answer 1

1、标准中建议的做法是将文字部分用label标记括起来，并用for属性指向输入框的id
2、有了label就可以以block浮动了
3、浮动之后需要给label和input设置相同的行高，并给label一个宽度，再给个文本右对齐
4、label要clear:left，input要clear:right

追问

是这个意思吗？（超出字数了没法粘全）
Location

还是没有对齐

追答

<label for="location">Location</label>
<input type="text" id="location" name="location" />

label {
  display: block;
  float: left;
  clear: left;
  width: 100px;
  text-align: right;
  line-height: 30px;
}
input {
  display: block;
  float: left;
  clear: right;
  line-height: 30px;
}

Answer 2

最简单的办法是：
给form一个宽度，把文本用div包起来，然后让input来个float:right。

Answer 3

label{
	line-height:inherit;
}
input{
	vertical-align:middle;
}
label>input[type="checkbox"],label>input[type="radio"]{
	margin-top:-0.185em;
	*margin-top:-0.1em;
	margin-right:0.3em;
	outline:none;
}

<label>name:<input type="text"></label>

以上是Boostrap的写法楼主可以参考

Answer 4

用float飘一下，例如float-left之类的就可以了

Answer 5

给INPUT加样式 vertical-align:middle;