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

Question

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

所以我所做的是为每个元素设置 margin-left，并为第一个子元素禁用 margin-left。但是看看现在会发生什么，如果我有一条新线，就会发生这种情况:

_{(来源:gyazo.com)}

看到我的 margin-left 在新行上导致的额外边距了吗？

我该如何防止这种情况发生？我的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>

js fiddle :

http://jsfiddle.net/cgbR9/

Answer 1

好的，开始了:

maybe you can just use a margin-right and reset it to last-child if needed ?