Question

由于某些原因，我的CSS的填充和边距不起作用

＆＃13;

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

＆＃13;

<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>

＆＃13;

我已经读过一些问题，如果我设置display: inline-block;它应该有用，但对我来说它仍然不起作用。

我错过了什么吗？

编辑：目前看起来像

它应该看起来像

Answer 1

似乎工作正常。你期待什么？

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

我看到两个问题，这实际上取决于你在寻找什么。首先，每个盒子使用100％的宽度。将其减少到较小的数量（比如30％），你可以看到各个盒子。但是，它仍然垂直排列，因为它们之间有手动换行符。这似乎有效。

Answer 3

＆＃34; optinfield＆＃34; 20px填充正在输入字段内而不是外部移动文本。如果你想移动所有块 - 带有图像和文本的表单 - 所有这些都在右边，你应该改变容器div的宽度，现在设置为＆＃34;列满＃34;或者给它你需要的空间。你也有一些课程＆＃34; margin-20＆＃34;我不知道它是什么，您已经上传了表单，表单没有问题：）

Answer 4

我最终添加了！在填充和边距结束时非常重要而且效果很好

CSS填充和边距不起作用？

4 个答案: