<el-aside width="200px">
<ul class="indu">
<li>
<p>
Aside
</p>
</li>
<li>
<p>
<a href="https://www.jd.com" target="mainframe">京东</a>
</p>
</li>
<li>
<p>
<a href="https://www.taobao.com" target="mainframe">淘宝</a>
</p>
</li>
</ul>
</el-aside>
css:
.el-aside ul{
margin: 0;
padding: 0;
list-style: none;}
.el-aside ul{
width: 100%;
}
.el-aside ul li{
width: 100%;
height: 60px;
}
.el-aside ul li a{
display: block;
height: 100%;
width: 100%;
color: #fff;
line-height: 60px;
text-align: center;
}
.el-aside ul li.active a{
color: #FFAD17;
background-color: #D3D3D3;
}
.el-aside ul li a,p:hover{
color: #FFAD17;
background-color: #D3D3D3;
}
并且不可以这样同时设置p,a:.el-aside ul li a,p:hover。
解决方法:使得ul下的
- 标签下的元素统一,如果像上图,执行时p标签内容和a标签会重合,或者格式错误。