网页导航栏中常用li标签嵌套超链接用法

在网页中导航,菜单等部分的设计,需要使用到列表ul,其中的列表项li一般会嵌套a标签,超链接到指定url。在li标签嵌套a链接时,a链接中通常包含文字。

为了使文字居中,而且当点击li标签时,整个区域都可以响应到a链接,操作不是特别清晰,做了如下总结:

<ul>
  <li><a href='index.html'> 首页 </a></li>"
  <li><a href='staff.html'>员工风采</a></li>
  <li><a href=''>部门精粹</a></li>
  <li><a href=''>深入仓库</a></li>
  <li><a href=''>我要登录</a></li>
</ul>

.container-header .aside ul>li{
  cursor: pointer;
  list-style: none;
  //color: @backgroundColor-black;
  font-size:14px;
  font-family:"微软雅黑 Light";
  //font-weight: bolder;
  float: left;
  //vertical-align: middle;
  width:15%;
  border:1px solid @backgroundColor-white;
  height:70px;
}
.container-header .aside ul>li a{
  list-style: none;
  color: @backgroundColor-black;
  text-decoration: none;
  display: inline-block;
  //width:100%;
  padding:24px 30px;
  height:100%;
}
直接给a标签设置盒子模型(padding:24px 30px;),即可使a标签整个填充li标签,使点击操作可以响应整个li标签区域。

猜你喜欢

转载自blog.csdn.net/hcjs_zee/article/details/78294750