I'm asking a web design expert to help me figure out how to achieve the look inside the box in the picture. The code is as follows. _html/css

I'm asking a web design expert to help me figure out how to achieve the look inside the box in the picture. The code is as follows. _html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:43:20

Original

1292 people have browsed it

<div class="wrapper"><p>账户信息</p><hr>    <form id="signupForm" method="post" action="" class="zcform">                  <p class="clearfix">        	<label class="one" for="telphone">用户类型：</label>        	<label><input  type="radio" name="user" value="Individual user"  checked="checked" style="width:20px;margin-top:18%;color:#ffffff;"/><b style="margin-left:-10px;color:black;">个人用户</b></label>        	<label><input  type="radio" name="user" value="enterprise user"   style="width:20px;margin-top:18%;"/><b style="margin-left:-10px;color:black;">企业用户</b></label>         </p>                            <p class="clearfix">        	<label class="one" for="telphone">用户名：</label>        	<input id="telphone" name="telphone" class="required" value placeholder="请输入手机号" />        </p>          <p class="clearfix">         	<label class="one"  for="password">登录密码：</label>        	<input id="password" name="password" type="password" class="{required:true,rangelength:[8,20],}" value placeholder="请输入密码" />        </p>        <p class="clearfix">        	<label class="one" for="confirm_password">确认密码：</label>        	<input id="confirm_password" name="confirm_password" type="password" class="{required:true,equalTo:'#password'}" value placeholder="请再次输入密码" />        </p>    <p style="position:absolute;left:110px;">联系方式</p><hr>                    <p class="clearfix" style="margin-top:100px;">        	<label class="one" for="telphone">手机号码：</label>        	<input id="telphone" name="telphone" class="required" value placeholder="请输入手机号" />        </p>        <p class="clearfix">        	<label class="one" >校验码：</label>            <input class="identifying_code" type="text" value placeholder="请输入手机6位校验码" />            <input class="get_code" type="button" value="获取验证码" />        </p>                   <p class="clearfix">        	<label class="one" for="agent">经纪人号：</label>        	<input id="agent" name="agent" type="text" class="required" value placeholder="请输入经纪人手机号" />        </p>        <p class="clearfix agreement">        	<input type="checkbox" />            <b class="left">已阅读并同意<a href="#">《用户协议》</a></b>        </p>       	<p class="clearfix"><input class="submit" type="submit" value="立即注册"/></p>           <p class="last"><a href="http://www.17sucai.com/">立即登录&gt;</a></p>           </form>  </div>

Copy after login

Reply to discussion (solution)

Write like this:

Account information

id="signupForm" method="post" action="" class="zcform">

                                                   one" for="telphone">User type*
                                             label>
Individual users*
                                                                                                                                                    < ;color:black;">Business users*
p> ;
                                                                                                                                                                                                     />

                                                                   登录密码*

                   确认密码*

联系方式*

                  手机号码*

                 校验码*

                经纪人号*

                已阅读并同意《用户协议》

立即登录>

Set the width of the large div in the body, and use the top and bottom margins of 0 and left and right margins auto to center the two inside the large div The same is true for a small div. Set the width and center it with the top and bottom margins of 0 and the left and right margins auto; all input boxes are vertically aligned without using tables, but using absolute for unified alignment. After the text box is set to absolute, it will be found For elements above the first-level non-static parent, the position of the small div needs to be set to relative.