首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何指定W3.CSS悬停在下拉列表上希望间距的位置?

如何指定W3.CSS悬停在下拉列表上希望间距的位置?
EN

Stack Overflow用户
提问于 2018-06-24 06:59:38
回答 2查看 58关注 0票数 0

首先,我知道这个问题可能已经被问了一百万次了。话虽如此,这是我第一次把手放在HTML/CSS cookie jar中,我觉得自己像一个彻头彻尾的笨蛋,因为我不能利用所有可用的资源来解决这个问题。这是我从天知道有多少网站上想出来的:

代码语言:javascript
复制
<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“添加到表单作用域定义中时,什么也没有发生。我确信我正在做一些愚蠢的事情,希望能得到大家的帮助。如果我遗漏了任何重要的信息,请让我知道,我会很乐意添加它。谢谢。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-06-24 07:10:39

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

我认为您想要在与w3-dropdown-content类相同的元素上使用w3-padding-small类(或W3.CSS参考页面上的任何类似填充类)。

代码语言:javascript
复制
<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>

票数 2
EN

Stack Overflow用户

发布于 2018-06-26 06:32:43

"w3-padding“可以满足您的需求。您可以在输入和“立即注册”按钮周围添加类"w3-border“。顺便说一句,我建议你坚持使用css库中的一个,要么是bootstrap,要么是w3.css。否则,它会变得太复杂,并可能相互干扰。在试图理解代码行为奇怪的原因时,您可能会浪费时间。

代码语言:javascript
复制
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
  <div class="w3-light-grey">
    <div class="w3-dropdown-hover">
      <button class="w3-button">Register</button>
      <div class="w3-dropdown-content w3-bar-block w3-card-4 w3-padding">
        <input type="text" placeholder="Username" class="w3-input"/>
        <input type="email" placeholder="Email Address" class="w3-input"/>
        <input type="password" placeholder="Password" class="w3-input"/>
        <input type="password" placeholder="Confirm Password" class="w3-input"/>
        <button  class="w3-button">Register Now</button>
      </div>
  </div>
</div>
 </body>
</html>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51005695

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档