按鈕定位的問題

如果你看看我的網站http://goo.gl/GchAbB你會發現，「確定」按鈕，綠色是不是放置在彈出的通訊框中輸入字段的左邊，因爲我想它是（另見下圖）。我不明白的是，元素完全位於jsfiddle 按鈕定位的問題

所以我想我的代碼的其他部分與通訊形式衝突，但無法弄清楚什麼以及如何解決這個問題。

感謝FO你的幫助

編輯：代碼更新基於約翰·C·發現

enter image description here

/******NEWSLETTER *****/ 

#newsletterpopup { 
    display: none; 
    width: 400px; 
    padding:10px; 
    line-height:14px; 
} 

#newsletterpopup h1{ 
    font-size: 16px; 
    padding-bottom: 20px; 
    font-weight:600; 
     text-transform: uppercase; 

} 
#newsletterpopup p{ 
    font-size: 14px; 
    font-weight:300; 
    padding-bottom: 20px; 

} 

.non-merci { 
padding-top: 20px; 
    position: absolute; 
    text-align: center; 
    bottom: 5px; 
    right: 5px; 
    font-size: 12px; 
    color: white; 
    padding: 8px 18px; 
    margin: 18px 0 0 0px; 
    text-decoration: none; 
     background: rgba(71, 186, 255, 0.8); 

    -webkit-transition: background 0.3s ease; 
    -moz-transition: background 0.3s ease; 
    -ms-transition: background 0.3s ease; 
    -o-transition: background 0.3s ease; 
    transition: background 0.3s ease; 

     cursor: pointer; 

} 


.non-merci:hover { 
    background: rgba(71, 186, 255, 1); 
} 

.newsletter-field { 
    display: block; 
    width: 240px; 
    height: 30px; 
    float:left; 
    padding-right: 10px; 
    margin-bottom: 20px; 
    border-top-width: 1px; 
    border-right-width: 1px; 
    border-bottom-width: 1px; 
    border-left-width: 1px; 
    border-top-color: #d9d9d9; 
    border-right-color: #d9d9d9; 
    border-bottom-color: #d9d9d9; 
    border-left-color: #d9d9d9; 
    border-top-style: dotted; 
    border-right-style: dotted; 
    border-bottom-style: dotted; 
    border-left-style: dotted; 
    background-color: #efefef; 
    line-height: 1.38; 
    color: #444444; 

    -webkit-transition: all 0.3s ease-in-out; 
    -moz-transition: all 0.3s ease-in-out; 
    -o-transition: all 0.3s ease-in-out; 
    -ms-transition: all 0.3s ease-in-out; 
    transition: all 0.3s ease-in-out; 
    animation-direction: alternate; 
    -moz-animation-direction: alternate; 
    -webkit-animation-direction: alternate; 
    -o-animation-direction: alternate; 

    } 


.newsletter-button { 
    display: block; 
    width: 40px; 
    height: 32px; 
    margin-left: 10px; 
    background-color: rgb(202, 224, 84); 
    font-size: 14px; 
    font-weight: 400; 
    text-align: center; 
    color: #fff; 
} 


/****** END NEWSLETTER *****/

enter image description here

來源

2014-07-05 Greg

看一眼就說明你<form>有60％的寬度。這將箱子推下。此外，您的.newsletter-button上的保證金不正確。（它繼承右頁邊距把它推）

[編輯] 我推薦設置：

.newsletter-button { margin : 0; } 
form.form-newsletter { width: 100%; }

來源

2014-07-05 20:34:47

謝謝。事實上，這是因爲我有兩種形式，一種需要60％，而通訊則不需要。我是否應該命名時事通訊表單「form2」或其他內容，並設置100％的寬度？或者保留「表單」，併爲「新聞稿」添加一個「寬度爲100％」的類？非常感謝 – Greg

我剛剛嘗試添加一個類，但現在OK按鈕放在「x非merci」按鈕後面，仍然低於輸入字段不在同一級別： - / – Greg

在.newsletter-button，你有margin-left: 10px;。如果將其更改爲0，則它將與該字段左對齊。

來源

2014-07-05 20:32:02

感謝。我已根據您的建議更新了代碼（您可以檢查鏈接），但這並不能解決問題。我把margin-left 10px在輸入字段和按鈕之間留有一些空間 – Greg

在styles.css，第207行，我仍然看到'10px'。當我通過開發工具改變它時，它左對齊。 –

''按鈕上的'margin-right'也在移動它，強制它低於輸入字段的自然流量。 –

按鈕定位的問題

回答

相關問題