[英]JS element inserting causes unexpected shift
我在说的是,当您超出密码字段的范围时(例如,此处),JS会在表单错误消息下方插入。 向下滑动FB登录链接的问题,我不知道为什么。
同样,这是一个侧面问题,但是当您将鼠标悬停在“提交”按钮上时(效果使边框变宽),FB链接也会向下移动一点。
.new_user_popup {
position: fixed;
top: 50%;
left: 50%;
margin-top: -105px;
margin-left: -300px;
background: #fff;
width: 600px ;
height: 210px;
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
z-index: 9999999;
font-size: 14px;
}
.new_user {
border-right-style: solid;
border-color: rgba(80, 140, 255, 0.83);
border-width: 1px;
padding-right: 40px;
margin-top: 30px;
margin-left: 50px;
display: inline-block;
width: 200px;
}
input#user_email{
width: 180px;
border-color: rgba(80, 140, 255, 0.83);
height: 15px;
font-size: 13px;
}
input#user_password{
width: 180px;
border-color: rgba(80, 140, 255, 0.83);
height: 15px;
font-size: 13px;
}
input#user_password_confirmation{
width: 180px;
border-color: rgba(80, 140, 255, 0.83);
height: 15px;
font-size: 13px;
}
.sign_up_submit {
margin-top: 5px;
border-style: solid;
background-color: #ffffff;
color: rgba(80, 140, 255, 0.93);
border-width: 2px;
padding-bottom: 10px;
height: 25px;
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 16px;
border-style: solid;
border-color: rgba(80, 140, 255, 0.83);
font-weight: 500;
}
.sign_up_submit:hover {
border-width: 3px;
}
.format_error {
background-color: #d61354;
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;;
font-weight: 300;
font-size: 12px;
color: white;
padding-right: 0;
width: 150px;
}
.fb_sign_up{
display: inline-block;
vertical-align: 50px;
margin-left:50px;
}
#facebook_sign_up{
display: block;
width: 200px;
height: 53px;
background: url(http://static.freepik.com/free-photo/fb-connect-button-vector_630856.jpg) ;
background-size: 200px 106px;
background-position: 0 0;
}
这是因为您的.fb_sign_up
div是一个内联块,并且您设置的vertical-align
是相对于父级的(当错误消息显示时,它会扩展)。 在MDN页面上, vertical-align
:
<length>
将元素的基线在其父级基线上方的给定长度处对齐
我相信您可以通过一些小的更改就可以达到预期的结果:
.fb_sign_up{
display: inline-block;
vertical-align: top;
margin-top: 50px;
margin-left:50px;
}
看起来普遍滥用内联块。 表单元素应该永远是一个块元素。 但是为了快速解决,我在这里工作了。
有了这个,我加float: left
到.new_user
,改变vertical-align
,以padding-top
上.fb_signup
您可能要考虑使用CSS框架来帮助布局您的列。 Bootstrap CSS是一个流行的选择。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.