我的HTML如下:
而我的css:
#nav {
display: inline;
}
然而,li之间的空白显示出来.我可以通过折叠它们来删除空格,如下所示:
但这主要是通过手工维护,我想知道是否有更清洁的方法.
这里有几个选项,首先我会在创建内联列表时给你正常的练习:
然后CSS使其按预期运行:
#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;
}
显然我省略了悬停和活动集,但是这创建了一个很好的块级导航,并且这是一种非常常见的方法,可以在保持标准的同时执行此操作./*记得根据自己的喜好进行调整,为背景添加颜色,等等*/
如果你想保留它只是文本和内联,我相信你不想添加块元素:
margin: 0 5px 0 0; /* that's, top 0, right 5px, bottom 0, left 0 */
意识到你想要移除空白,只需相应地调整边距/填充.
消除空格的另一种有用方法是将列表的font-size属性设置为0,并将列表元素设置为所需的大小.
你真正想要的是CSS3 白色空间崩溃:丢弃.但我不确定是否有任何浏览器实际支持该属性.
一些替代解决方案是让标签的尾部消耗空白.例如:
我见过的另一件事是使用HTML注释来消耗空格
如果您可以使用浮点数,请参阅thismat的解决方案,并根据您可能需要添加设置的尾随的要求clear: both;.
但CSS3属性可能是最好的理论方法.
列表项的更好解决方案是使用:
#nav li{float:left; width:auto;}
没有头痛的视觉效果完全相同.
采用非基于XML的HTML并省略.
然后将项的显示属性设置为内联块而不是内联.
#nav li {
display: inline-block;
/display: inline; /* for IE 6 and IE 7 */
/zoom: 1; /* for IE 6 and IE 7 */
}
京公网安备 11010802040832号 | 京ICP备19059560号-6 