武林網(www.49028c.com)文章簡介：負margin是好東西.

上個月完成的項目，舉個讓我糾結N小時的模塊，先上圖：

默認狀態為灰色，不帶圓圈，已完成狀態為紅色，當前進行中顯示為黃色，并且圓圈在兩個字中間，最后一個狀態“成功”如果為灰色，線條要小于文字，但其它部分要連貫。原型代碼如下，為了JS結構當然越簡單越好：

<ul>
< li class=“status_finished”>選擇</li>
< li class=“status_current”>預訂</li>
< li>支付</li>
< li>成功</li>
< /ul>

讓人糾結的時候到了：圓圈左右線的顏色不同，如果切在一起那最后一個狀態就要單獨應用沒有右側多余線條的圖片，等于要切兩套圖，方案要放棄；如果每個狀態只切到圓圈部分，給右側留點空白出來它就會顯示在兩個字中間了，但緊接著的狀態怎么延續到左側？有一個方法：負margin~~~

放大后的效果圖：

樣式如下：

ul { margin: 36px auto; height: 30px; }
ul li { float: left; width: 164px; margin-right: -6px; padding-top: 15px; text-align: right; background: url(“xxxx.gif”) no-repeat right XXpx; color: #666; }
ul li.status_finished { background-position: right XXpx; }
ul li.status_current { background-position: right XXpx; font-weight: bold; color: #000; }

注意：合并圖片的時候圓圈右側要留出6px（具體值根據實際情況確定）透明空隙，左側線條為自適應考慮盡可能長一點。