html - 如何在 W3.CSS 悬停下拉菜单中指定我想要的间距？

Question

首先，我知道这个问题可能已被问过一百万次。话虽这么说，但这是我第一次接触 HTML/CSS cookie jar，我觉得自己像个彻头彻尾的白痴，因为我无法利用所有可用的资源来解决这个问题。这是我从天知道有多少网站想出的:

<div class="w3-dropdown-hover">
        <button class="w3-button w3-hide-small"><i class="fa fa-user"></i> REGISTER</button>
        <div class="w3-dropdown-content w3-bar-block w3-border">
        <form autocomplete="off">
                <div class="form-group">
                    <input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="">
                </div>
                <div class="form-group">
                    <input type="email" name="email" id="email" tabindex="2" class="form-control" placeholder="Email Address" value="">
                </div>
                <div class="form-group">
                    <input type="password" name="password" id="password" tabindex="3" class="form-control" placeholder="Password">
                </div>
                <div class="form-group">
                    <input type="password" name="confirm-password" id="confirm-password" tabindex="4" class="form-control" placeholder="Confirm Password">
                </div>
                <div class="form-group">
                    <div class="row">
                        <div class="col-xs-6 col-xs-offset-3">
                            <input type="submit" name="register-submit" id="register-submit" tabindex="5" class="form-control btn btn-info" value="Register Now">
                        </div>
                    </div>
                </div>
                <input type="hidden" class="hide" name="token" id="token" value="7c6f19960d63f53fcd05c3e0cbc434c0">
            </form>
        </div>
    </div>

运行时看起来像这样:

我希望在它周围有一些缓冲，就像我看到所有示例代码一样。但是，出于某种原因，当我尝试将 class="px-4 py-4"添加到表单范围定义时，什么也没有发生。我确信我正在做一些愚蠢的事情，并且会很感激任何帮助。如果我遗漏了任何重要信息，请告诉我，我很乐意添加。谢谢。

Answer 1

我没有在 W3.CSS 引用页上找到任何关于 px-4 或 py-4 类的引用:https://www.w3schools.com/w3css/w3css_references.asp#padding

我认为您的意思是要在与 w3-下拉内容类。

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<div class="w3-dropdown-hover">
  <button class="w3-button w3-hide-small"><i class="fa fa-user"></i> REGISTER</button>
  <div class="w3-dropdown-content w3-bar-block w3-border w3-padding-small">
    <form autocomplete="off">
      <div class="form-group">
        <input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="">
      </div>
      <div class="form-group">
        <input type="email" name="email" id="email" tabindex="2" class="form-control" placeholder="Email Address" value="">
      </div>
      <div class="form-group">
        <input type="password" name="password" id="password" tabindex="3" class="form-control" placeholder="Password">
      </div>
      <div class="form-group">
        <input type="password" name="confirm-password" id="confirm-password" tabindex="4" class="form-control" placeholder="Confirm Password">
      </div>
      <div class="form-group">
        <div class="row">
          <div class="col-xs-6 col-xs-offset-3">
            <input type="submit" name="register-submit" id="register-submit" tabindex="5" class="form-control btn btn-info" value="Register Now">
          </div>
        </div>
      </div>
      <input type="hidden" class="hide" name="token" id="token" value="7c6f19960d63f53fcd05c3e0cbc434c0">
    </form>
  </div>
</div>