CODEWITHSUNDEEP
cssstyleshtml-lists
baitas212123
baitas212123

Reputation: 151

How to style <li> items inside <ul>?

I want to do items style like here

ul child items

and I'm doing it with UL. Here is the code what I have http://jsfiddle.net/WVLR9/1/

ul.gallery_items {
    width: 831px;
    height: auto;
    margin: 0 auto;
    list-style: none;
}
ul.gallery_items li {
    width: 260px;
    height: 200px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 2px solid #e5e5e5;
    float: left;
    margin-top: 25px;
    margin-left: 19px;
}
ul.gallery_items li:first-child {
    margin-top: 25px;
    margin-left: 0px;
}

but I have no idea why the 4th item have bigger margin-left option... it should be in the same place like 1st item but in the second line. Can anyone help me?

Upvotes: 1

Views: 4239

Answers (5)

blueby
blueby

Reputation: 81

ul.gallery_items{
width: 831px;
height: auto;
margin: 0 auto;
list-style: none;
}
ul.gallery_items li{
width: 260px;
height: 200px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 2px solid #e5e5e5;
float: left;
margin-top: 25px;
margin-right: 10px;}

this should do it.

You've applied a 

ul.gallery_items li:first-child{
margin-top: 25px;
margin-left: 0px;

}

thats why first item didnt have left margin

Upvotes: 0

Laurent B
Laurent B

Reputation: 2220

how about this :)

ul.gallery_items li{
  width: 260px;
  height: 200px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  border: 2px solid #e5e5e5;
  float: left;
  margin-top: 25px;
  margin-right: 19px; /* maybe you will need to adjust your margin on the ul element. */
}

Upvotes: 0

Adam Zielinski
Adam Zielinski

Reputation: 2874

4th item has the same margin as other items, you just removed margin from the first item:

ul.gallery_items li:first-child{
    margin-top: 25px;
    margin-left: 0px;
}

and it looks like something is wrong with 4th element;

  1. You could use margin-right instead of margin-left
  2. You could wrap each row with additional <div class="row">
  3. You could remove margin-left: 0 form the first element, and give margin-left: -19px to the parent element

Upvotes: 1

Katniss
Katniss

Reputation: 321

You are explicitly giving the first item a different left margin:

ul.gallery_items li:first-child{
    margin-left: 0px;
}
ul.gallery_items li{
    margin-left: 19px;
}

Upvotes: 1

RSM
RSM

Reputation: 15108

http://jsfiddle.net/WVLR9/2/

You put margin-left: 19px on the li's rather than margin-right.

Margin left was causing the 4th row to be a certain margin away from the left border

    ul.gallery_items{
    width: 831px;
    height: auto;
    margin: 0 auto;
    list-style: none;
}
ul.gallery_items li{
    width: 260px;
    height: 200px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 2px solid #e5e5e5;
    float: left;
    margin-top: 25px;
    margin-right: 19px;

}
ul.gallery_items li:first-child{
    margin-top: 25px;
    margin-left: 0px;
}

Upvotes: 3

Related Questions