<li>的下邊框?yàn)槭裁纯梢愿采w<div>的上邊框?而不是相反?
#tabs ul li.on
? ? ?{border-top:2px solid red;border-bottom:2px solid #fff;}
? ? ?#tabs div
? ? ?{height:120px;border:1px solid blue;border-top:2px solid red;padding:5px;}
#tabs ul li.on
? ? ?{border-top:2px solid red;border-bottom:2px solid #fff;}
? ? ?#tabs div
? ? ?{height:120px;border:1px solid blue;border-top:2px solid red;padding:5px;}
2018-06-05
舉報(bào)
2018-06-15
經(jīng)過我半小時(shí)的測試: 如果你把li設(shè)置成了display: inline-block或者干脆就是inline的話,就是li的下邊框覆蓋div的上邊框。這大概可以理解成文字等行內(nèi)元素默認(rèn)z-index就比塊元素div等高(當(dāng)然因?yàn)榇蠹叶紱]有position事實(shí)上不是z-index的差別,而是某種設(shè)定。畢竟常規(guī)來說讓一個(gè)div覆蓋掉文字是不大常見的。)事實(shí)上經(jīng)過測試,inline = inline-block > block。而如果是兩個(gè)優(yōu)先級(jí)相同的(如兩個(gè)block,一個(gè)inline和一個(gè)inline-block),后面元素覆蓋前面元素(這和有position情況下z-index一樣的情況相同)。所以如果你li還是block,那么就是div的上邊框覆蓋li的下邊框啦。
當(dāng)然,最好還是設(shè)個(gè)position然后定個(gè)z-index。這樣子誰在上誰在下清清楚楚。