CSS填充和邊距不起作用？

Question

由於某些原因，我的CSS的填充和邊距無法正常工作

 .optinfield { width: 100%; padding: 12px 20px; margin: 8px 0; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; display: inline-block; } 

 <div class="row clearfix" data-mode="optin"> <div class="column full" > <div class="margin-20" style="text-align: center;"> <form accept-charset="UTF-8" id="optin-form" action="http://localhost:3000/landing_pages/optin" method="post"> <input id="optin-external-id" name="optin_external_id" type="hidden" value="{optin_external_id}"> <input id="optin-tags" class="optinfield" name="tags" type="hidden" value=""> <input id="optin-redirect-url" name="redirect_url" type="hidden" value="http://"> <input id="optin-from-url" name="from_url" type="hidden"> <input id="optin-first-name" class="optinfield" name="contact[first_name]" placeholder="First Name" required="required" type="text" > <br> <input id="optin-last-name" class="optinfield" name="contact[last_name]" placeholder="Last Name" required="required" type="text"> <br> <input id="optin-email" class="optinfield" name="contact[email]" placeholder="Email" required="required" type="email" > <br> <div style="margin:1em 0 2.5em;"> <input class="btn btn-primary full-width" id="optin-submit" name="commit" title="Add me to the list." type="submit" value="Submit"> <br> </div> </form> <script type="text/javascript"> document.getElementById("optin-submit").addEventListener("click", function(clickEvent) { document.getElementById("optin-from-url").value = window.location.href }); </script> </div> </div> </div> 

我已經閱讀了幾個問題，如果我設置display: inline-block; ，則為display: inline-block; 它應該起作用，但對我來說仍然不起作用。

我想念什么嗎？

編輯：目前看來

它應該看起來像

Answer 1

似乎工作正常。 您期望什么？

 document.getElementById("optin-submit").addEventListener("click", function(clickEvent) { document.getElementById("optin-from-url").value = window.location.href }); 

 .optinfield { width: 100%; padding: 12px 20px; margin: 8px 0; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; display: inline-block; } 

 <div class="row clearfix" data-mode="optin"> <div class="column full"> <div class="margin-20" style="text-align: center;"> <form accept-charset="UTF-8" id="optin-form" action="http://localhost:3000/landing_pages/optin" method="post"> <input id="optin-external-id" name="optin_external_id" type="hidden" value="{optin_external_id}"> <input id="optin-tags" class="optinfield" name="tags" type="hidden" value=""> <input id="optin-redirect-url" name="redirect_url" type="hidden" value="http://"> <input id="optin-from-url" name="from_url" type="hidden"> <input id="optin-first-name" class="optinfield" name="contact[first_name]" placeholder="First Name" required="required" type="text"> <br> <input id="optin-last-name" class="optinfield" name="contact[last_name]" placeholder="Last Name" required="required" type="text"> <br> <input id="optin-email" class="optinfield" name="contact[email]" placeholder="Email" required="required" type="email"> <br> <div style="margin:1em 0 2.5em;"> <input class="btn btn-primary full-width" id="optin-submit" name="commit" title="Add me to the list." type="submit" value="Submit"> <br> </div> </form> </div> </div> </div> 

Answer 2

我看到兩個問題，這實際上取決於您要尋找的內容。 首先，您要為每個盒子使用100％的寬度。 將其減少到較小的數量（例如30％），您可以看到各個方框。 但這仍然使它們垂直對齊，因為在它們之間有手動換行符。 這似乎有效。

Answer 3

“ optinfield”的20px填充是在輸入字段內而不是外部移動文本。 如果要將所有塊（帶有圖像和文本的表單）移至右側，則應更改容器div的寬度，該容器現在設置為“ column full”，或為其留空格你需要。 您也有一些我不知道它是什么的“ margin-20”類，您僅上傳了表單，並且表單沒有問題:)

Answer 4

我最終在填充和邊距的末尾添加了！important，效果很好