表单对齐效果

sibyl_pisces

效果图
见附件
css

<style type="text/css">*{margin:0;padding:0;}body{font-size:63%;color:#000;}/*input*/.input_on{padding:2px 8px 0pt 3px;height:18px;border:1px solid #999;background-color:#FFFFCC;}.input_off{padding:2px 8px 0pt 3px;height:18px;border:1px solid #CCC;background-color:#FFF;}.input_move{padding:2px 8px 0pt 3px;height:18px;border:1px solid #999;background-color:#FFFFCC;}.input_out{/*height:16px;默认高度*/padding:2px 8px 0pt 3px;height:18px;border:1px solid #CCC;background-color:#FFF;}/*form*/ul.input_test{margin:20px auto 0 auto;width:500px;list-style-type:none;}ul.input_test li{width:500px;height:22px;margin-bottom:10px;}.input_test label{float:left;padding-right:10px;width:100px;line-height:22px;text-align:right;font-size:1.4em;}.input_test p{float:left;_margin-top:-1px;}.input_test span{float:left;padding-left:10px;line-height:22px;text-align:left;font-size:1.2em;color:#999;}</style> html

<ul class="input_test"><li><label for="inp_name">姓名：</label><p><input id="inp_name" class="input_out" name="" type="text"   onmousemove="this.className='input_move'" onmouseout="this.className='input_out'" /></p><span>请输入您的姓名</span></li><li><label for="inp_email">Email：</label><p><input id="inp_email" class="input_out" name="" type="text"   onmousemove="this.className='input_move'" onmouseout="this.className='input_out'" /></p><span>请输入您的Email</span></li><li><label for="inp_web">网站：</label><p><input id="inp_web" class="input_out" name="" type="text"   onmousemove="this.className='input_move'" onmouseout="this.className='input_out'" /></p><span>请输入您的网站</span></li></ul>