CSS填充和邊距不起作用？

出於某種原因，填充和保證金爲我的CSS不工作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; ，它應該工作，但對我來說仍不起作用。

我錯過了什麼嗎？

編輯：目前，它看起來像

，它應該像

來源

2017-07-28 RickS

必須缺少一些東西。我使用了屏幕截圖，並且按鈕具有所需的垂直間距。這可能是因爲您在頁面的某個其他元素上有樣式，並且正在限制這些元素。你能給我們更多的代碼嗎？ – BSD

我結束了！填充和邊距的結束以及它的效果很好

來源

2017-07-29 22:32:58 RickS

看起來工作得很好。你期望什麼？

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>

來源

2017-07-28 21:05:01 Gerard

我添加了一些照片，告訴你我需要什麼，我也意外地編輯了你的文章對不起！ – RickS

我看到兩個問題，它真的取決於你在找什麼。首先，你使用每個盒子的寬度的100％。將其削減到較小的數量（例如30％），您可以看到各個框。但是，這仍然會將它們垂直排列，因爲它們之間有手動換行符。這似乎工作。

來源

2017-07-28 21:08:02 BSD

我添加了一些圖片來顯示發生了什麼 – RickS

在你的原始文章中，你有填充：12px 20px，但我注意到，在你現在顯示的代碼中，填充從選擇樣式中缺少。這將做到這一點。如果你添加填充包應該工作。 – BSD

多數民衆贊成多數民衆贊成在說什麼，由於某種原因，它不是在我加載頁面時添加填充，我不知道爲什麼 – RickS

的20像素的填充爲「optinfield」移動的輸入字段內的文本，而不是外部。如果你想移動所有的塊 - 包含圖像和文本的表單 - 所有這些都在右邊，你應該改變容器div的寬度，它現在被設置爲「滿欄」，或者給它你需要的空間。你也有那裏一些類「margin-20」，我不知道它是什麼，你只上傳了表格，而且表格沒有問題:)

來源

2017-07-28 21:57:10 DanielaB67

https://jsfiddle.net/scorpio777/Lnybatsg/ – DanielaB67

CSS填充和邊距不起作用？

回答

相關問題