pipe理内联列表项之间空白的最佳方法
我的HTML如下：
<ul id="nav"> <li><a href="./">Home</a></li> <li><a href="/About">About</a></li> <li><a href="/Contact">Contact</a></li> </ul> 和我的CSS：
#nav { display: inline; }
但是li之间的空格出现了。 我可以通过折叠它们来删除空白，如下所示：
<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内联列表的时候的一些常规：
<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>
然后，使CSS的function，你打算：
#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; }
显然，我忽略了hover和活动集，但是这创build了一个很好的块级导航，并且在遵循标准的同时，这是一个非常普遍的方法。 / *记得调整你的喜好，给背景添加颜色，等等* /
如果你想保持文本，只是内联，我相信你不想添加块的元素：
margin: 0 5px 0 0; /* that's, top 0, right 5px, bottom 0, left 0 */
意识到你想删除空白，只是相应地调整边距/填充。
消除空白的另一个有用的方法是将列表的font-size属性设置为0 ，将列表元素设置为所需的大小。
你真正想要的是CSS3 的空白崩溃：丢弃 。 但我不确定是否有浏览器实际上支持该属性。
一些替代解决scheme是让标签的尾部消耗空白。 例如：
<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注释来消耗空白
<ul id="nav"><!-- --><li><a href="./">Home</a></li><!-- --><li><a href="/About">About</a></li><!-- --><li><a href="/Contact">Contact</a></li><!-- --></ul>
如果你可以使用浮动，请参阅thismat的解决scheme，根据需要，可能需要添加一个设置为clear: both;的结尾<li> clear: both; 。
但CSS3属性可能是最好的理论方法。
列表项目的更好的解决scheme是使用：
#nav li{float:left; width:auto;}
具有完全一样的没有头痛的视觉效果。
采用非基于XML的HTML并省略</li> 。
<ul id="nav"> <li><a href="./">Home</a> <li><a href="/About">About</a> <li><a href="/Contact">Contact</a> </ul>
然后将项目的显示属性设置为内联块而不是内联。
#nav li { display: inline-block; /display: inline; /* for IE 6 and IE 7 */ /zoom: 1; /* for IE 6 and IE 7 */ }
问题是UL中的字体大小。 将它设置为0，它会消失，但是你不希望你的实际文字被设置的很小，那么把你的LI字体大小设置为你想要的。
<ul style="font-size:0px;"> <li style="font-size:12px;"> </ul>
我有同样的问题，没有上述解决scheme可以解决这个问题。 但我发现这对我有用：
而不是这个：
<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你的html代码（链接文本之前和之后的空格）：
<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>
