html - 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;应该可以工作，但对我来说仍然不起作用。

我想念什么吗？

编辑：当前它看起来像

它应该看起来像

最佳答案

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

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>

关于html - CSS填充和边距不起作用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45382330/