将两个并列的元素的属性设为inline-block的影响
这是html代码:
<form class="login_form" id="login_form" action="">
<input id="userNumber" class="userNumber customInput" type="text" placeholder="用户名" autocomplete="off">
<p id="userNumber_error"><i>*</i>用户名错误</p>
<input id="userPass" class="userPass customInput" type="text" placeholder="密码" autocomplete="off">
<p id="userPass_error"><i>*</i>密码错误</p>
<img id="check_img" style="-webkit-user-select: none;display: inline;float:right;width:140px;height:47px;" /><input id="validateCode" class="validateCode customInput" placeholder="验证码">
<p id="validateCode_error"><i>*</i>验证码错误</p>
<button id="login-button" type="button" class="customButton login-button" οnclick="myFun()">登陆</button><br/>
<span class="registerHtml"><a href="register.html">注册</a></span><span class="forgetPass"><a href="update_password.html">忘记密码?</a></span>
</form>
<div id="login_container" style="width: 300px;height: 400px;display: inline-block;margin-left:20px;margin-top:30px;"></div>
form的css如下:
.login_form{
border-right:2px solid #CCC;
padding: 32px 30px;
position: relative;
/*top:-92px; */
min-height: 378px;
left:0px;
z-index: 2;
display: inline-block;
//vertical-align: middle;
margin-top: 54px;
}
在浏览器中打开,显示的效果如下:
按照道理,他们应该处于同一高度的,但事实上并非如此。
现在看看inline-block的属性:
inline-block元素可以将对象呈递为内联对象,但是对象的内容作为块对象呈递。
将对象用作内敛元素但又可以对它进行宽高设置。但有一点需要注意的是对象仍然呈递为内联元素,而同一行内的内联元素默认是基于 baseline 对齐的。
CSS渲染机制:对于一个inline-block元素,如果内部没有inline内联元素,或者overflow不是visible,则该元素的基线就是它margin的底边缘,否则就是元素内部最后一行内联元素的基线。
解决方法:
设置所有内联元素 vertical-align: top/middle/bottom;
因为vertical-align 属性设置元素的垂直对齐方式,该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐