css 如下: HTML代码
思路:这个表单比较特殊,左边为文字右边为输入框,同样我们可以有浮动的方法去实现,把文字加上lable标签,并不是因为我们要定义样式而加入lable,而是这样写是标准的写法之一。在用br即产生的换行也可以用来定义清除左浮动。总结一下,也就是一个lable定义它左浮动,另一个input是行内元素因此会紧跟在浮动元素之后,在后面加入一个br来清除浮动,清除的目的也就是不影响下一组的左右浮动。
以上的表单较为简单所以用样式也免强用可以,但对于复杂的表单我还是建议使用表格。
补充网摘:
为表单布局
在对表单布局进行设计时,常常让人忍不住想使用Table,现在quirksmode教给我们使用Tableless forms。
其实很简单,原理就是让<label>和<input>(包括其它的form元素,如:<select>, <textarea>)的display属性为block再浮动到左侧,行末有<br />负责清除浮动。有固定的宽度,并且文字又对齐,这样漂亮的布局就出来了!
HTML部分:
<form>
<label for="name">Name</label>
<input id="name" name="name"><br />
<label for="address">Address</label>
<input id="address" name="address"><br />
<label for="city">City</label>
<input id="city" name="city"><br />
</form>
部分:
label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}
label {
text-align: right;
width: 75px;
padding-right: 20px;
}
br {
clear: left;
}
我在用的时候喜欢把行末的<br />加上class="clear",因为这样<label>中要是想用到<br />就不会出问题了。
用CSS做表单的一个例子
80酷酷网 80kuku.com