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

时间:2013-09-30 13:24:36

标签: css styles html-lists

我想做像这里的项目风格

ul child items

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

5 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

您明确地给第一个项目留下了不同的左边距:

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

答案 2 :(得分:1)

第4项与其他项目具有相同的保证金,您刚从第一项中删除了保证金:

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

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

  1. 您可以使用margin-right代替margin-left
  2. 您可以使用其他<div class="row">
  3. 打包每一行
  4. 您可以从第一个元素中移除margin-left: 0,并将margin-left: -19px提供给父元素

答案 3 :(得分:0)

怎么样:))

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

答案 4 :(得分:0)

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;

}

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