How to remove space between list items in navigation (HTML / CSS)
I'm having trouble removing the space between the li items in navigation, I already set the margin: 0px for the item & anchor (a link) but the space/gap still exist.
How can I remove those spaces?
/* navigation styles */
nav {
background: rgba(6, 19, 72, 1);
background: linear-gradient(to bottom, rgba(6, 19, 72, 1) 0%, rgba(15, 31, 91, 1) 100%);
}
.nav {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.nav li {
display: inline;
margin: 0px;
}
nav ul.nav {
width: 1120px;
margin: 0 auto;
min-width: 120px;
}
span.homeicon {
width: 35px;
height: 32px;
display: inline-block;
vertical-align: middle;
position: relative;
background-image: url('http://s16.postimg.org/cq68hbikx/home_icon.png');
background-size: cover;
}
.nav a {
display: inline-block;
padding: 10px;
width: 120px;
text-decoration: none;
color: white;
font-family: arial;
line-height: 30px;
height: 30px;
margin: 0px;
border: 1px solid #344da7;
border-top: none;
}
a.nav_home {
max-width: 50px;
width: 50px !important;
}
.nav a:hover {
background-color: #344da7;
height: 100%;
}<nav>
<ul class="nav">
<li><a href="" class="nav_home"><span class="homeicon"></span></a></li>
<li><a href="">SPORTS</a></li>
<li><a href="">LIVE CASINO</a></li>
<li><a href="">SLOTS</a></li>
<li><a href="">POKER</a></li>
<li><a href="">PROMOTION</a></li>
<li><a href="">BANKING</a></li>
<li><a href="">AFFILIATE</a></li>
</ul>
</nav>These spaces are actually caused by the white space in your html.
To solve, add float: left to your <li> tags:
.nav li {
float: left;
}
To see that it really is the whitespace in your HTML, try removing it and testing:
.nav {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.nav li {
display: inline;
margin: 0px;
}
nav ul.nav {
width: 1120px;
margin: 0 auto;
min-width: 120px;
}
span.homeicon {
width: 35px;
height: 32px;
display: inline-block;
vertical-align: middle;
position: relative;
background-image: url('http://s16.postimg.org/cq68hbikx/home_icon.png');
background-size: cover;
}
.nav a {
display: inline-block;
padding: 10px;
width: 120px;
text-decoration: none;
font-family: arial;
line-height: 30px;
height: 30px;
margin: 0px;
border: 1px solid #344da7;
}
a.nav_home {
max-width: 50px;
width: 50px !important;
}
.nav a:hover {
background-color: #344da7;
height: 100%;
}<nav>
<h1> With Whitespace </h1>
<ul class="nav">
<li><a href="" class="nav_home"><span class="homeicon"></span></a></li>
<li><a href="">SPORTS</a></li>
<li><a href="">LIVE CASINO</a></li>
<li><a href="">SLOTS</a></li>
<li><a href="">POKER</a></li>
<li><a href="">PROMOTION</a></li>
<li><a href="">BANKING</a></li>
<li><a href="">AFFILIATE</a></li>
</ul>
<h1> Without Whitespace </h1>
<ul class="nav">
<li><a href="" class="nav_home"><span class="homeicon"></span></a></li><li><a href="">SPORTS</a></li><li><a href="">LIVE CASINO</a></li><li><a href="">SLOTS</a></li><li><a href="">POKER</a></li><li><a href="">PROMOTION</a></li><li><a href="">BANKING</a></li><li><a href="">AFFILIATE</a></li>
</ul>
</nav>Try looking at https://css-tricks.com/fighting-the-space-between-inline-block-elements/
You might want to try using display: flex; instead https://css-tricks.com/snippets/css/a-guide-to-flexbox/
The spaces are caused by white spaces. You should make sure that there are no spaces in between each li .
The best way to do so IMO:
<ul class="nav"><!--
--><li><a href="" class="nav_home"><span class="homeicon"></span></a></li><!--
--><li><a href="">SPORTS</a></li><!--
--><li><a href="">LIVE CASINO</a></li><!--
--><li><a href="">SLOTS</a></li><!--
--><li><a href="">POKER</a></li><!--
--><li><a href="">PROMOTION</a></li><!--
--><li><a href="">BANKING</a></li><!--
--><li><a href="">AFFILIATE</a></li>
</ul>
Sure, you can change your entire layout to using floats, but that is really not the best way, and kind of going backwards. inline-block was created specifically to address the problems with using floats for layout.
上一篇: 如何忽略标签，CSS和PHP之间的空白