html - 显示有序列表项

Question

我有：http: //jsfiddle.net/Gkz4v/9/

.pagination li a {
    float: left;
      width: 6px;
      height: 6px;
      line-height: 6px;
      margin-right: 3px;
      text-indent: -9999px;
      background-color: #4b4b4b;
}

在上面的类中，如果我删除“float:left”行，结果的显示与该行存在时不同。请在我上面的小提琴中尝试一下。

我想要具有“float：left”效果的不同行上的项目

你能解释一下这是如何工作的吗？

Answer 1

您描述的效果是元素的大小？你正在尝试做这样的事情：http: //jsfiddle.net/Gkz4v/10/

有必要添加一个display: blockin <a>。这是必要的，因为<a>带有display: inline内联元素的元素不遵守大小规则。

Answer 2

标签默认为内联a元素，不服从宽度和高度。float设置元素是使其服从宽度的一种方法（这就是您注意到效果的原因），但在这种情况下，您只需将 更改display为block以获得所需的外观。

.pagination
{
    padding: 3px 0 3px 3px;
}  

.pagination li a
{
    display: block; /* change here */
    width: 6px;
    height: 6px;
    line-height: 6px;
    margin-bottom: 3px; /* changed the margin too, so it's nice and spaced out */
    text-indent: -9999px;
    background-color: #4b4b4b;
}

.pagination li.on a
{
    background-color: #1f84e3;
}

ol { list-style: none; } /* JSFiddle adds this automatically I think, but in the general case, this will remove the dots in the list */

工作示例。