代码中发生了什么导致下拉按钮不遵循与其他按钮相同的格式?我尝试制作自己的下拉按钮,但我的尝试失败了,即使我尝试复制下拉菜单,它也无法按预期工作。我知道我的代码可能很糟糕而且有错误,但我们很感激您的帮助。
CSS:
.navbut
{
background-color: grey;
width: 15%;
height: 50px;
margin-left: 3%;
margin-right: 1%;
margin-bottom: 0px;
margin-top: 0px;
padding: 0;
border: none;
background: none;
font-weight: bold;
color: white;
}
.navbut:hover
{
background-color: black;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown .dropdown-menu {
position: absolute;
top: 100%;
display: none;
margin: 0;
/****************
** NEW STYLES **
****************/
list-style: none; /** Remove list bullets */
width: 100%; /** Set the width to 100% of it's parent */
padding: 0;
}
.dropdown:hover .dropdown-menu {
display: block;
}
/** Button Styles **/
.dropdown button {
background-color: grey;
width: 15%;
height: 50px;
margin-left: 3%;
margin-right: 1%;
margin-bottom: 0px;
margin-top: 0px;
padding: 0;
border: none;
background: none;
font-weight: bold;
color: white;
}
/** List Item Styles **/
.dropdown a {
display: block;
text-decoration: none;
background: grey;
color: white;
}
/** List Item Hover Styles **/
.dropdown a:hover {
background: black;
}
HTML:
<div class="nav">
<button class="navbut">Home</button>
<button class="navbut">Prize draws</button>
<button class="navbut">Filler</button>
<button class="navbut">Filler</button>
<div class="dropdown">
<!-- trigger button -->
<button class="navbut">Navigate</button>
<!-- dropdown menu -->
<ul class="dropdown-menu">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
最佳答案
您需要为按钮添加宽度,因为它在 div 容器中,而其他按钮则不在。下面我将宽度更改为 100% 而不是 15%,并根据其他按钮大小添加左右填充。希望能帮助到你。
/** Button Styles **/
.dropdown button {
background-color: gray;
width: 100%;
height: 50px;
margin-left: 3%;
margin-right: 1%;
margin-bottom: 0px;
margin-top: 0px;
padding-left:60px;
padding-right:60px;
border: none;
background: none;
font-weight: bold;
color: white;
}
关于html - 代码中发生了什么使下拉按钮不遵循与其他按钮相同的格式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47963529/