在网页中导航,菜单等部分的设计,需要使用到列表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标签区域。