JS元素將導致意外的變化

我所講的，就是當你模糊了密碼字段（例如這裏）的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; 




}

來源

2013-05-21 Joe Half Face

使用float：留作.new_user css類，看看你是否在尋找 http://jsfiddle.net/tHV4W/5/ – PRP

那是因爲你的 DIV是一個內聯塊，和你設置vertical-align是相對父（當錯誤消息顯示其擴展）。從MDN page on vertical-align：

<length>

對齊的元素的基線在其父的基線

我相信你可以用一個達到預期的效果上面指定的長度幾個小變化：

.fb_sign_up{ 
    display: inline-block; 
    vertical-align: top; 
    margin-top: 50px; 
    margin-left:50px; 
}

http://jsfiddle.net/tHV4W/1/

來源

2013-05-21 20:14:53 bfavaretto

它看起來像內聯塊的一般誤用。表單元素應該是塊元素。但爲了快速修復，我在這裏工作。

http://jsfiddle.net/uuyFt/

有了這個，我加入float: left到.new_user，改變vertical-align到padding-top上.fb_signup

你可能要考慮使用一個CSS框架，以幫助您的佈局列。 Bootstrap CSS是一個流行的選擇。

來源

2013-05-21 20:21:29

JS元素將導致意外的變化

回答

相關問題