如何在<ul>？</ul> </li>中设置<li>项目的样式

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选项......它应该在第一个项目的同一个地方，但在第二行。任何人都可以帮助我吗？

Answer 1

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

你把保证金左：19px放在li而不是保证金权利上。

左边缘导致第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;
}

看起来第4个元素出了问题;

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;

}

这就是为什么第一项没有留下余量