html - 奇怪的 css 问题 - 是什么导致它在列表中具有顶部填充

Question

这是我的代码：http: //jsfiddle.net/fuWjR/

CSS是这样的：

#pagination li { font-size:11px; }
#pagination li, #pagination-clean a { border:solid 1px #DEDEDE; margin-right:2px; }
#pagination .previous-off,
#pagination .next-off { color:#888888; display:block; float:left; font-weight:bold; padding:0px; }
#pagination .next a,
#pagination .previous a { font-weight:bold; border:solid 1px #FFFFFF; } 
#pagination .active { color:#00000 font-weight:bold; display:block; float:left; padding:0px; }
#pagination a:link,
#pagination a:visited { color:#0033CC; display:block; float:left; padding:0px; }​

从示例中可以看出，每个数字的分页都会递减。我希望它们都出现在同一行。我在示例中看不到任何顶部填充，那么为什么要这样做呢？

Answer 1

添加：

display: block;
float: left;

到样式表中的 li 项目，并确保您有：

overflow: hidden; // or auto

对于父 ul

Answer 2

您应该将此添加到您的“#pagination li”中，这是最好的选择。

display: inline;
float: left;