Question

我一直在做一个简单的商店布局。我想展示一些“热”的东西。项目。每个项目都是一个100x70的盒子，带有36x32图像和文本。每个元素之间必须有15px的边距。

所以我所做的是每个元素左边距离，第一个孩子禁用边距左边。但看看现在发生了什么，如果我有一个新线，这将会发生：

img http://gyazo.com/eea6b80feb3c36e9d26ab8f1cbf3dd46.png

查看我的保证金左边在新线上造成的额外保证金？

我该怎样防止这种情况？我的css：

#hot {
    max-width: 800px;
    margin-top: 15px;
    display: block;
    overflow: hidden;
}

#hot li {
    width: 100px;
    height: 70px;
    background-color: rgba(0, 0, 0, 0.4);
    border: solid 1px rgba(255, 255, 255, 0.1);
    list-style: none;
    display: inline-block;
    margin-left: 15px;
}

#hot li:first-child {
    margin-left: 0;
}

#hot li img {
    display: block;
    width: 36px;
    height: 32px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
}

#hot ul {
    padding: 0;
    margin: 0;
}

#hot li span {
    font-size: 12px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    display: block;
}

示例html：

        <div id="hot">
            <span id="hotItems">Hot items</span>
            <ul>
                <li>
                    <img src="http://www.runelocus.com/img/items/144845.png" />
                    <span>A meme</span>
                </li>

            </ul>
        </div>

小提琴：

http://jsfiddle.net/cgbR9/

Answer 1

好的，这就是：

也许您可以使用margin-right并将其重置为last-child 如果需要？

新行中元素之间的CSS列表边距

1 个答案: