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 ？