My HTML is as follows:
<ul id="nav">
<li><a href="./">Home</a></li>
<li><a href="/About">About</a></li>
<li><a href="/Contact">Contact</a></li>
</ul>
And my css:
#nav {
display: inline;
}
However the whitespace between the li's shows up. I can remove the whitespace by collapsing them like so:
<ul id="nav">
<li><a href="./">Home</a></li><li><a href="/About">About</a></li><li><a href="/Contact">Contact</a></li>
</ul>
But this is being maintained largely by hand and I was wondering if there was a cleaner way of doing it.
Several options here, first I'll give you my normal practice when creating inline lists:
<ul id="navigation">
<li><a href="#" title="">Home</a></li>
<li><a href="#" title="">Home</a></li>
<li><a href="#" title="">Home</a></li>
</ul>
Then the CSS to make it function as you intend:
#navigation li
{
display: inline;
list-style: none;
}
#navigation li a, #navigation li a:link, #navigation li a:visited
{
display: block;
padding: 2px 5px 2px 5px;
float: left;
margin: 0 5px 0 0;
}
Obviously I left out the hover and active sets, but this creates a nice block level navigation, and is a very common method for doing this while still keeping with standards. /* remember to tweak to your liking, add color to the background, et cetera */
If you would like to keep it just with text and just inline, no block elements I believe you'd want to add:
margin: 0 5px 0 0; /* that's, top 0, right 5px, bottom 0, left 0 */
Realizing you would like to REMOVE the whitespace, just adjust the margins/padding accordingly.
Another useful way to eliminate the whitespace is to set the list's font-size property to 0 and the list elements' one back to the required size.
What you really want is the CSS3 white-space-collapse: discard. But I'm not sure if any browsers actually support that property.
A couple alternative solutions is to let the tailing end of a tag consume the whitespace. For example:
<ul id="nav"
><li><a href="./">Home</a></li
><li><a href="/About">About</a></li
><li><a href="/Contact">Contact</a></li
></ul>
Another thing I've seen done is to use HTML comments to consume whitespace
<ul id="nav"><!--
--><li><a href="./">Home</a></li><!--
--><li><a href="/About">About</a></li><!--
--><li><a href="/Contact">Contact</a></li><!--
--></ul>
See thismat's solution if you are okay using floats, and depending on the requirements you might need to add a trailing <li> that is set to clear: both;.
But the CSS3 property is probably the best theoretical way.
A better solution for list items is to use:
#nav li{float:left; width:auto;}
Has exactly the same visual effect without the headache.
Adopt non-XML-based HTML and omit </li>.
<ul id="nav">
<li><a href="./">Home</a>
<li><a href="/About">About</a>
<li><a href="/Contact">Contact</a>
</ul>
Then set the display property of the items to inline-block instead of inline.
#nav li {
display: inline-block;
/display: inline; /* for IE 6 and IE 7 */
/zoom: 1; /* for IE 6 and IE 7 */
}
The problem is the font size in the UL. Set it to 0 and it will disappear, but you don't want you actual text to be set so small, so then set your LI font size to whatever you want it to be.
<ul style="font-size:0px;">
<li style="font-size:12px;">
</ul>
I had the same Problem and none of the above solutions could fix it. But I found out this works for me:
Instead of this:
<ul id="nav">
<li><a href="./">Home</a></li>
<li><a href="/About">About</a></li>
<li><a href="/Contact">Contact</a></li>
</ul>
build your html code like this (whitespace before and after the link text):
<ul id="nav">
<li><a href="./"> Home </a></li>
<li><a href="/About"> About </a></li>
<li><a href="/Contact"> Contact </a></li>
</ul>
<html>
<head>
<style>
ul li, ul li:before,ul li:after{display:inline; content:' '; }
</style>
</head>
<body>
<ul><li>one</li><li>two</li><li>three</li></ul>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</body>
</html>
来源：https://stackoverflow.com/questions/241512/best-way-to-manage-whitespace-between-inline-list-items