Reputation: 350
I have the following HTML:
<ul class="navlist">
<li><a href="index.html">Home</a></li>
<li><a href="agenda.html">Agenda</a></li>
<li><a href="presenters.html">Presenters</a></li>
</ul>
And I'm using this CSS:
.navlist {
padding: 10px 0 0;
margin: 0;
list-style-type: none;
height: 33px;
}
.navlist li a {
text-decoration: none;
font-size: 18px;
color: white;
background: #63B3E4;
padding: 10px 45px 12px;
}
.navlist li a:hover {
color: #63B3E4;
background: white;
}
.navlist li {display: inline;}
As shown in a fiddle, there is whitespace between the li
elements. How do I remove that whitespace?
Upvotes: 3
Views: 97
Reputation: 3614
The reason is that you set the LI as inline
elements, the spaces are caused by the "spaces"/linebreaks between the html code </li>
and <li>
.
We usually make the LI float: left
instead:
http://jsfiddle.net/Lsbwt0n8/3/
Upvotes: 2
Reputation: 15981
you can remove the whitespace by adding font-size:0
to parent
.navlist {
font-size: 0;
}
.navlist {
padding: 10px 0 0;
margin: 0;
list-style-type: none;
height: 33px;
font-size: 0;
}
.navlist li a {
text-decoration: none;
font-size: 18px;
color: white;
background: #63B3E4;
padding: 10px 45px 12px;
}
.navlist li a:hover {
color: #63B3E4;
background: white;
}
.navlist li {
display: inline;
}
.navlist {
font-size: 0;
}
<ul class="navlist">
<li><a href="index.html">Home</a>
</li>
<li>
<a href="agenda.html">Agenda</a>
</li>
<li>
<a href="presenters.html">Presenters</a>
</li>
</ul>
Upvotes: 1
Reputation: 83125
In this instance you can just add
.navlist li:after { content: ' '; font-size:0; }
The white-space between the li elements will collapse into the pseudo element, which has a font-size of 0, so no gap is rendered.
.navlist {
padding: 10px 0 0;
margin :0;
list-style-type: none;
height:33px;
}
.navlist li a {
text-decoration: none;
font-size:18px;
color:white;
background:#63B3E4;
padding: 10px 45px 12px;
}
.navlist li a:hover {
color:#63B3E4;
background:white;}
.navlist li {display: inline;}
.navlist li:after { content: ' '; font-size:0; }
<ul class="navlist">
<li><a href="index.html">Home</a></li><li>
<a href="agenda.html">Agenda</a></li><li>
<a href="presenters.html">Presenters</a></li>
</ul>
Upvotes: 1
Reputation: 12239
In the HTML, remove all whitespace between each closing tag </li>
and opening tag <li>
. In addition, set display: inline-block
on the list items.
Demonstration:
.navlist {
padding: 10px 0 0;
margin: 0;
list-style-type: none;
height: 33px;
}
.navlist li {
display: inline-block;
}
.navlist li a {
text-decoration: none;
font-size: 18px;
color: white;
background: #63B3E4;
padding: 10px 45px 12px;
}
.navlist li a:hover {
color: #63B3E4;
background: white;
}
<ul class="navlist">
<li><a href="index.html">Home</a></li><li>
<a href="agenda.html">Agenda</a></li><li>
<a href="presenters.html">Presenters</a></li>
</ul>
Upvotes: 3
Reputation: 22966
In order to remove the white space, you must remove the white space.
<ul class="navlist">
<li><a href="index.html">Home</a></li><li><a href="agenda.html">Agenda</a></li><li><a href="presenters.html">Presenters</a></li>
</ul>
http://jsfiddle.net/Lsbwt0n8/5/
Upvotes: 0