html - li > 填充没有填充父 li div
问题描述
我想为我的“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>
推荐阅读
- c# - .NET 4.8 没有为 Linux 创建自包含文件
- reactjs - 如何使用 React Hooks 渲染不同的组件
- sql-server - SQL Server 需要时间来执行查询,但 CPU、Read、Write 都很低
- python - TypeError:字符串索引在python中必须是整数
- c# - 如何将 ASP.NET Framework 配置迁移到 ASP.NET Core?
- java - 无法使用 `debugImplementation 'androidx.fragment:fragment-testing:'+fragment_version` 作为依赖项运行应用程序
- java - Spring DATA - 如何在不加载整个 LazyProxyObject 的情况下为 ManyToMany 关系加载 id 集合
- ios - iOS 13 自动填充不会填充 UITextField,直到用户手动聚焦它
- ssh - vscode中的ssh错误:权限被拒绝(公钥,密码)
- node.js - 节点路由中的全局变量