效果：
参考代码：
html:
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>不使用表格制作表单</title> <link rel="stylesheet" type="text/css" href="不使用表格制作表单.css" /> </head> <body> <h1>User Registration Form</h1> <form method="post" action="#"> <p> <label for="fullname">Name:</label> <input type="text" name="fullname" class="text" /> </p> <p> <label for="email">Email Address:</label> <input type="text" name="email" class="text" /> </p> <p> <label for="password">Password:</label> <input type="password" name="password" class="text" /> </p> <p> <label for="confirmpassword">Confirm Password:</label> <input type="password" name="confirmpassword" class="text" /> </p> <p> <label for="level">Member Level:</label> <select name="lebvel"> <option value="silver">silver</option> <option value="gold">gold</option> </select> </p> <p> <input type="submit" name="btnSubmit" id="btnSubmit" value="Sign Up" class="btn" /> </p> </form> </body> </html>
css:
View Code
@charset "utf-8"; /* CSS Document */ input.text { color:#000099; border:1px inset #000000; width:200px; } form p { clear:left; paddint-top:5px; } form p label { /*关键：将label浮动起来，然后设置label宽度*/ float:left; width:200px; }
