Question

I have: 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;
}

In the class above, if I remove line “float:left”, result is displayed differently than if the line is there. Please try it in my fiddle above.

I want items on different lines with the effect of “float:left”

Can you please explain how does this work?

Answer 1

The a tag is an inline element by default, which do not obey widths and heights. floating an element is one way to make it obey widths (which is why you noticed the effect), but in this case, you can just change the display to block to get your desired look.

.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.