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填充和边距不起作用？

回答

相关问题