我想使这个导航看起来像平铺格式.但是这里有一些白色空间出现在一排的末端.是否有可能使其形成像导航和环绕的边界?在它内部导航看起来像适当的瓷砖而不是一些白色空间..
我的代码..
.nav { width: 960px; margin: 50px auto; border: 1px solid #06c; display: table } .nav ul { padding: 0; margin: 0 } .nav ul li { list-style: none; float: left; border: 1px solid #06C; font-family: Swis721 Cn BT; font-weight: bold; display: block } .nav ul li a { text-decoration: none; color: #06C; padding: 10px 20px 10px 12px; display: block } .nav ul li a:hover { color: #fff; background: #06c }
<div class="nav"> <ul> <li><a href="#">ALL</a> </li> <li><a href="#">AGENCY</a> </li> <li><a href="#">AUTOMOBILES</a> </li> <li><a href="#">BANKING</a> </li> <li><a href="#">CONSUMER DURABLE & FMCG</a> </li> <li><a href="#">CONSULTING</a> </li> <li><a href="#">EDUCATIONAL</a> </li> <li><a href="#">FINANCIAL SERVICES</a> </li> <li><a href="#">HOSPITALITY</a> </li> <li><a href="#">INFRASTRUCTURE & REAL ESTATE</a> </li> <li><a href="#">INTERNATIONAL</a> </li> <li><a href="#">IT</a> </li> <li><a href="#">LEgal</a> </li> <li><a href="#">MANFACTURING</a> </li> <li><a href="#">MARINE</a> </li> <li><a href="#">MEDIA</a> </li> <li><a href="#">OIL & GAS</a> </li> <li><a href="#">ONLINE</a> </li> <li><a href="#">OTHERS</a> </li> <li><a href="#">PHARMA</a> </li> <li><a href="#">RETAIL</a> </li> <li><a href="#">THEME PARK</a> </li> </ul> </div>
解决方法
可能这会起作用,因为我已经为某些’li’提供了一些特殊的样式(css),但是这不会提供100%的输出,但在这种情况下仍然有效.
.nav { width: 970px; margin: 50px auto; border:0px solid; display: table } .nav ul { padding: 0; margin: 0 } .nav ul li { list-style: none; float: left; border: 1px solid #06C; font-family: Swis721 Cn BT; font-weight: bold; display: block; min-width:5%; width:auto; text-align:center } .nav ul li a { text-decoration: none; color: #06C; padding: 10px 20px 10px 12px; display: block } .nav ul li a:hover { color: #fff; background: #06c }
<div class="nav"> <ul> <li><a href="#">ALL</a> </li> <li><a href="#">AGENCY</a> </li> <li><a href="#">AUTOMOBILES</a> </li> <li><a href="#">BANKING</a> </li> <li><a href="#">CONSUMER DURABLE & FMCG</a> </li> <li><a href="#">CONSULTING</a> </li> <li style="width:25%"><a href="#">EDUCATIONAL</a> </li> <li><a href="#">FINANCIAL SERVICES</a> </li> <li><a href="#">HOSPITALITY</a> </li> <li><a href="#">THEME PARK</a> </li> <li><a href="#">INTERNATIONAL</a> </li> <li><a href="#">IT</a> </li> <li><a href="#">LEgal</a> </li> <li><a href="#">MANFACTURING</a> </li> <li style="width:15%"><a href="#">MARINE</a> </li> <li><a href="#">MEDIA</a> </li> <li><a href="#">OIL & GAS</a> </li> <li><a href="#">ONLINE</a> </li> <li><a href="#">OTHERS</a> </li> <li><a href="#">PHARMA</a> </li> <li><a href="#">RETAIL</a> </li> <li style="width:45%"><a href="#">INFRASTRUCTURE & REAL ESTATE</a> </li> </ul> </div>
原文地址:https://www.jb51.cc/html/225567.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。