Geek Answers Handbook

Space bar

I want this navigation to look like tiles. But here, some white spaces go at the end of one row. Is it possible that it forms as a border surrounded by navigation, and inside it the navigation looks like regular tiles, and not some kind of empty space.

My code ..

.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>
+7
html css
source share
3 answers

This will probably work, since I gave some special styles (css) for some "li", however it will not provide 100% output as you want, but still effective in that case.

 .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>

Note. Keep in mind that the output will be different in this case, for example, a change in fonts or any change in navigation position other than the one that is written now.

+2
source share

you can use this

 .nav{ border:0px solid; } .nav ul li{ width:25%;/*according to your need you can increase or decrease*/ }
0
source share
 .nav ul { padding: 0; margin: 0 } .nav { width: 960px; margin: 50px auto; border: 1px solid #06c; display: table; padding: 0px 0px; font-size: 100%; } .nav ul li { list-style: none; float: left; border: 1px solid #06C; font-family: sans-serif; font-weight: bold; min-width: 7.8%; width: auto; font-size: inherit; text-align: center; } .nav ul li a { text-decoration: none; color: #06C; adding: 10px 12px 10px 12px; display: list-item; WIDTH: AUTO; min-width: 100%; box-sizing: border-box; } .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>
0
source share

More articles:


All Articles