CODEWITHSUNDEEP
css
user681061
user681061

Reputation: 255

Multi-column list with <li>

I'm using ul/li to create a multi column gallery view of a wordpress category. But all rows except the first gets a left margin..

I can't see what i'm doing wrong!

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

Do I have solve this with a for loop?

Upvotes: 1

Views: 162

Answers (4)

Bob
Bob

Reputation: 1

In your css, you have a left margin set up:

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

The spacing offsets every row after the first.

Upvotes: 0

tuff
tuff

Reputation: 5153

There is no margin on the first list item because of a style that applies to the :first-child of that container. You can remove the margin after every third list item with 

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

This will display your list items in three columns, as I assume you intend.

Upvotes: 0

Kermit
Kermit

Reputation: 34055

This is because you have a left margin or padding on your image. Change this to a right pad or margin and make sure you factor in the padding/margin width into the width of the li element:

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

Upvotes: 0

Josh Davenport-Smith
Josh Davenport-Smith

Reputation: 5511

It is caused by this CSS:

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

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

Which is overriding the margin-left given to .last-posts li elements with this CSS:

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

You could either get rid of the :first-child CSS or add a class to every post first on the line that receives margin-left: 0px;. That is up to you, there are many approaches

Upvotes: 1

Related Questions