如何指定W3.CSS悬停在下拉列表上希望间距的位置？
如何指定W3.CSS悬停在下拉列表上希望间距的位置？
提问于 2018-06-24 06:59:38
首先，我知道这个问题可能已经被问了一百万次了。话虽如此，这是我第一次把手放在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“添加到表单作用域定义中时，什么也没有发生。我确信我正在做一些愚蠢的事情，希望能得到大家的帮助。如果我遗漏了任何重要的信息，请让我知道，我会很乐意添加它。谢谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-24 07:10:39
我在W3.CSS参考页面上没有找到任何关于px-4或py-4类的参考资料：https://www.w3schools.com/w3css/w3css_references.asp#padding
我认为您想要在与w3-dropdown-content类相同的元素上使用w3-padding-small类(或W3.CSS参考页面上的任何类似填充类)。
<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>
Stack Overflow用户
发布于 2018-06-26 06:32:43
"w3-padding“可以满足您的需求。您可以在输入和“立即注册”按钮周围添加类"w3-border“。顺便说一句，我建议你坚持使用css库中的一个，要么是bootstrap，要么是w3.css。否则，它会变得太复杂，并可能相互干扰。在试图理解代码行为奇怪的原因时，您可能会浪费时间。
<!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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51005695
复制相关文章
相似问题
腾讯云开发者
