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: block中添加<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 */

Working example

显示有序列表项

2 个答案: