我想在“ a”元素中添加填充,这将决定父div的高度。尽管如果我添加它,则父div仍然不受影响。我似乎根本无法弄清楚。
这是一个汉堡导航栏菜单。因此,当我单击我的图标时,它应将导航栏降低,并且高度应与“ a”标记通过填充提供的高度相同。
<div id="side-menu" class="side-nav" v-bind:class="{'side-menu-open': isOpen}">
<ul class="side">
<li class="side"><a href="#">Home</a></li>
<li class="side"><a href="#">About</a></li>
<li class="side"><a href="#">Projects</a></li>
<li class="side"><a href="#">Contact</a></li>
</ul>
</div>
li.side {
display:inline-block;
margin-right: -4px;
}
li.side a {
padding: 3em 2em;
border-bottom: 1px solid #333;
display: block;
color: #fff;
text-decoration: none;
transition: 0.3s ease;
}
li.side a:first-child {
border-top: 1px solid #333;
}
li.side a:hover {
background-color: #333;
transition: 0.3s ease;
}
.side-nav {
transition: 0.4s;
background-color: #222;
width: 100% !important;
height:0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow: hidden;
}
.open {
transition: 1s;
}
.side-menu-open {
height: 70px !important;
}
.open-slide {
transition: 0.4s;
}
.open-slide:hover {
cursor: pointer;
}
最佳答案
您需要在此处将height
从固定值更改为auto
。
.side-menu-open {
height: auto;
}
默认情况下,
a
是内联元素。顶部和底部填充将不适用。您可以将显示类型更改为inline-block
。li.side {
display: inline-block;
margin-right: -4px;
}
li.side a {
padding: 3em 2em;
border-bottom: 1px solid #333;
color: #fff;
text-decoration: none;
transition: 0.3s ease;
/* added */
display: inline-block;
}
li.side a:first-child {
border-top: 1px solid #333;
}
li.side a:hover {
background-color: #333;
transition: 0.3s ease;
}
.side-nav {
transition: 0.4s;
background-color: #222;
width: 100% !important;
/*height: 0;*/
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow: hidden;
}
.open {
transition: 1s;
}
.side-menu-open {
height: auto !important;
}
.open-slide {
transition: 0.4s;
}
.open-slide:hover {
cursor: pointer;
}
<div id="test">
<div id="side-menu" class="side-nav" v-bind:class="{'side-menu-open': isOpen}">
<ul class="side">
<li class="side"><a href="#">Home</a></li>
<li class="side"><a href="#">About</a></li>
<li class="side"><a href="#">Projects</a></li>
<li class="side"><a href="#">Contact</a></li>
</ul>
</div>
</div>
关于html - li>填充未填充父级li div,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50653239/