用CSS做表单的一个例子
日期：2013-10-06 浏览次数：21078 次
如下： 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部分：
CSS部分：
思路：这个表单比较特殊，左边为文字左边为输入框，同样我们可以有浮动的方法去实现，把文字加上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 />就不会出问题了。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
