1

私は持っています：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" の効果で別の行にアイテムが欲しい

これがどのように機能するか説明してください。

4

2 に答える 2

3

あなたが説明する効果は、要素のサイズですか? 次のようなことをしようとしています: http://jsfiddle.net/Gkz4v/10/

に を追加する必要がありdisplay: blockます<a>。<a>is要素display: inlineと inline 要素はサイズ規則を尊重しないため、これが必要です。

于 2012-06-20T16:44:35.530 に答える
2

タグはデフォルトでインライン要素であり、a幅と高さには従いません。float要素を ing することは、幅に従うようにする 1 つの方法です (これが効果に気づいた理由です) が、この場合は、displaytoを変更するだけ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 */

実施例。

于 2012-06-20T16:47:48.537 に答える