| 标题:用CSS做表单的一个例子 |  |
如下： HTML代码
思路：这个表单比较特殊，左边为文字右边为输入框，同样我们可以有浮动的方法去实现，把文字加上lable标签，并不是因为我们要定义样式而加入lable，而是这样写是标准的写法之一。在用br即产生的换行也可以用来定义清除左浮动。总结一下，也就是一个lable定义它左浮动，另一个input是行内元素因此会紧跟在浮动元素之后，在后面加入一个br来清除浮动，清除的目的也就是不影响下一组的左右浮动。
以上的表单较为简单所以用样式也免强用可以，但对于复杂的表单我还是建议使用表格。
补充网摘：
为表单布局
http://www.5dlog.com/article.asp?id=126
在对表单布局进行设计时，常常让人忍不住想使用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 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>
CSS部分：
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 />就不会出问题了。
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 />就不会出问题了。
- 2007-4-1 15:23:42
| Copyright©2006 Alixixi.Com All Rights Reserved | 打印版本 | 阿里西西.Alixixi.COM |