CSS列表保证金

Question

我一直在一个简单的车间布局。我想显示一些'热门'项目。 每个项目是一个带有36x32图像和文​​本下的100x70盒子。每个元素之间必须有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 ？