武林網(wǎng)(www.survivalescaperooms.com)文章簡(jiǎn)介：負(fù)margin是好東西.

上個(gè)月完成的項(xiàng)目，舉個(gè)讓我糾結(jié)N小時(shí)的模塊，先上圖：

默認(rèn)狀態(tài)為灰色，不帶圓圈，已完成狀態(tài)為紅色，當(dāng)前進(jìn)行中顯示為黃色，并且圓圈在兩個(gè)字中間，最后一個(gè)狀態(tài)“成功”如果為灰色，線條要小于文字，但其它部分要連貫。原型代碼如下，為了JS結(jié)構(gòu)當(dāng)然越簡(jiǎn)單越好：

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

讓人糾結(jié)的時(shí)候到了：圓圈左右線的顏色不同，如果切在一起那最后一個(gè)狀態(tài)就要單獨(dú)應(yīng)用沒有右側(cè)多余線條的圖片，等于要切兩套圖，方案要放棄；如果每個(gè)狀態(tài)只切到圓圈部分，給右側(cè)留點(diǎn)空白出來它就會(huì)顯示在兩個(gè)字中間了，但緊接著的狀態(tài)怎么延續(xù)到左側(cè)？有一個(gè)方法：負(fù)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; }

注意：合并圖片的時(shí)候圓圈右側(cè)要留出6px（具體值根據(jù)實(shí)際情況確定）透明空隙，左側(cè)線條為自適應(yīng)考慮盡可能長(zhǎng)一點(diǎn)。