css - 複数列リスト

Question

ul/li を使用して、wordpress カテゴリの複数列のギャラリー ビューを作成しています。ただし、最初の行を除くすべての行には左マージンがあります..

何が間違っているのかわかりません！

http://spirit.no/category/musikkanmeldelser/

これを for ループで解決する必要がありますか?

Answer 1

これは、次の CSS が原因です。

.last-posts li:first-child {
  margin-left: 0px;
}

http://spirit.no/wp-content/themes/spirit/style.css 235行目

この CSS でmargin-left指定された要素をオーバーライドしているのは次のとおりです。.last-posts li

.last-posts li.the-post {
  width: 290px;
  min-height: 270px;
  float: left;
  margin-left: 15px;
  position: relative;
}

:first-childCSS を削除するか、受信行の最初のすべての投稿にクラスを追加することができますmargin-left: 0px;。それはあなた次第です、多くのアプローチがあります

Answer 2

これは、画像に左マージンまたはパディングがあるためです。これを右のパッドまたはマージンに変更し、パディング/マージンの幅をli要素の幅に考慮してください。

.last-posts li.the-post {
    width: 290px;           <== subtract margin/padding width here
    min-height: 270px;
    float: left;
    margin-left: 15px;
    position: relative;
}

Answer 3

:first-childそのコンテナの に適用されるスタイルのため、最初のリスト項目には余白がありません。次のコマンドを使用して、3 つおきのリスト項目の後に余白を削除できます。

.last-posts li:nth-child(3n+1) {
    margin-left: 0;
}

これにより、意図したとおり、リスト アイテムが 3 列に表示されます。

Answer 4

あなたのCSSでは、左マージンが設定されています：

.last-posts li.the-post {
width: 290px;
min-height: 270px;
float: left;
margin-left: 15px;
position: relative;
}

間隔は、最初の行の後にすべての行をオフセットします。