之前对于表单布局,一直使用表格进行布局。总是有那么一点不方便,今天用CSS写了一个,感觉还不错,记录一下,可能可能以后都可以抛弃table布局了。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <style type="text/css"> label{ margin-left: 50px; width: 80px; text-align:right; } form{ margin:0px } input{ width: 180px; border:1px solid #808080 } input.sexRadio{ width: 50px; } textarea{ width: 400px; height: 150px; } select{ width: 180px; } #sbutton{ margin-left: 380px; margin-top: 5px; width:80px; } </style> </head> <body> <form > <p> <label for="user">姓名:</label> <input type="text" id="user"/> <label>性别:</label> <input class = "sexRadio" type="radio" name="sex" value="male" /> 男 <input class = "sexRadio" type="radio" name="sex" value="female" /> 女 </p> <p> <label for="phone">电话:</label> <input type="text" id="phone"/> <label>地区:</label> <select name="country"> <option value="China">中国</option> <option value="America">美国</option> <option value="Britain">英国</option> </select> <p> <p> <label for="comment">备注:</label> <textarea id=comment name="comment"> </textarea> <p> <br /> <input type="submit" id="sbutton" value="确定" /><br /> </form> </body> </head>
效果如下,还不错