css - 如何风格里面的物品?

Question

我想做像这里这样的项目风格

我正在与 UL 合作。这是我拥有的代码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;
}

但我不知道为什么第 4 项有更大的 margin-left 选项......它应该和第 1 项一样在同一个地方，但在第二行。谁能帮我？

Answer 1

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

你把 margin-left: 19px 放在 li 的而不是 margin-right 上。

左边距导致第 4 行距左边框有一定的距离

    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;
}

Answer 2

您明确地为第一项提供了不同的左边距：

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

Answer 3

第 4 个项目与其他项目具有相同的边距，您刚刚从第一个项目中删除了边距：

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

看起来第四个元素有问题；

1. 你可以使用margin-right而不是margin-left
2. 你可以用额外的包装每一行<div class="row">
3. 您可以从margin-left: 0第一个元素中删除，并给margin-left: -19px父元素

Answer 4

这个怎么样 ：）

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. */
}

Answer 5

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;}

这应该这样做。

您已申请

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

}

这就是为什么第一项没有左边距