CSS 学习&测试记录

提示：您可以先修改部分代码再运行

////////////////////// - 2010-12-29 Update - //////////////////////

今天看到一篇关于 clear:both 的不错文章：http://www.cnbruce.com/blog/showlog.asp?log_id=1281。

另在工作中遇到一个关于 clear:both 的问题，就是做自定义表单时的问题，怎样才可以将“字段类型”里的选项排成一行四列，排列整齐。现记录下： <table width="90%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="14%" height="30"><p>编号ID　　：</p></td> <td width="86%">14</td> </tr> <tr> <td height="30">序　　　号：</td> <td><input name="id" type="text" id="id" value="自动生成" readonly="readonly" /></td> </tr> <tr> <td height="30"><p>字段中文名：</p></td> <td><input type="text" name="name" id="name" /></td> </tr> <tr> <td height="30"><p>字段英文名：</p></td> <td> <select name="table" id="table"> <option value="">请选择</option> <option value="qy_company">qy_company</option> <option value="sale_guest">sale_guest</option> </select> </td> </tr> <tr> <td height="30">字段类型　：</td> <td> <DIV class="nw"> <INPUT class="np" id="dtype1" style="ZOOM: 1" type="radio" CHECKED name="dtype" value="text" /> 单行文本(varchar) </DIV> <DIV class="nw"> <INPUT class="np" id="dtype2" style="ZOOM: 1" type="radio" name="dtype" value="textchar" /> 单行文本(char) </DIV> <DIV class="nw"> <INPUT class="np" id="dtype3" style="ZOOM: 1" type="radio" name="dtype" value="multitext" /> 多行文本 </DIV> <DIV class="nw"> <INPUT class="np" id="dtype4" style="ZOOM: 1" type="radio" name="dtype" value="htmltext" /> HTML文本 </DIV> <BR class="cls" /> <DIV class="nw"> <INPUT class="np" id="dtype5" style="ZOOM: 1" type="radio" name="dtype" value="textdata" /> 文本保存HTML数据 </DIV> <DIV class="nw"> <INPUT class="np" id="dtype6" style="ZOOM: 1" type="radio" name="dtype" value="int" /> 整数类型 </DIV> <DIV class="nw"> <INPUT class="np" id="dtype7" style="ZOOM: 1" type="radio" name="dtype" value="float" /> 小数类型 </DIV> <DIV class="nw"> <INPUT class="np" id="dtype8" style="ZOOM: 1" type="radio" name="dtype" value="datetime" /> 时间类型 </DIV> <BR class="cls" /> <DIV class="nw"> <INPUT class="np" id="dtype9" style="ZOOM: 1" type="radio" name="dtype" value="img" /> 图片 </DIV> <DIV class="nw"> <INPUT class="np" id="dtype10" style="ZOOM: 1" type="radio" name="dtype" value="imgfile" /> 图片(仅网址) </DIV> <DIV class="nw"> <INPUT class="np" id="dtype11" style="ZOOM: 1" type="radio" name="dtype" value="media" /> 多媒体文件 </DIV> <DIV class="nw"> <INPUT class="np" id="dtype12" style="ZOOM: 1" type="radio" name="dtype" value="addon" /> 附件类型 </DIV> <BR class="cls" /> <DIV class="nw"> <INPUT class="np" id="dtype13" style="ZOOM: 1" type="radio" name="dtype" value="select" /> 使用option下拉框 </DIV> <DIV class="nw"> <INPUT class="np" id="dtype14" style="ZOOM: 1" type="radio" name="dtype" /> 使用radio选项卡 </DIV> <DIV class="nw"> <INPUT class="np" id="dtype15" style="ZOOM: 1" type="radio" name="dtype" value="checkbox" /> Checkbox多选框 </DIV> <DIV class="nw"> <INPUT class="np" id="dtype16" style="ZOOM: 1" type="radio" name="dtype" value="stepselect" /> 联动类型 </DIV> </td> </tr> <tr> <td height="30">验证类型　：</td> <td> </td> </tr> <tr> <td height="30">默认值　　：</td> <td> </td> </tr> <tr> <td height="30">最大长度　：</td> <td> </td> </tr> <tr> <td height="30">表单Html　：</td> <td>◆自定义表单HTML用~name~表示提示文字，~form~表示表单元素 <br /> <textarea name="textfield" cols="100" rows="6" id="textfield">

提示：您可以先修改部分代码再运行