瀏覽器自動(dòng)在第二個(gè) li 處加了一個(gè)class，導(dǎo)致第一個(gè) li 的寬度變大，本人寫的代碼如下：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>水平圓角菜單導(dǎo)航</title><style type="text/css">*? ? {margin:0;padding:0;}ul? ?{list-style:none;border-bottom:5px solid #f60;padding-left:30px;height:30px;margin-top:20px;line-height:30px;}a? ? {float:left;display:block;width:120px;text-decoration:none;text-align:center;color:black;background-color:#ccc;}li a.on, a:hover{color:white;background-color:#f60;height:40px;line-height:40px; margin-top:-10px;}</style></head><body><ul><li><a class="on" href="#">首? 頁</li><li><a href="#">關(guān)于我們</li><li><a href="#">產(chǎn)品展示</li><li><a href="#">售后服務(wù)</li><li><a href="#">聯(lián)系我們</li></ul></body></html>
2 回答
已采納
慕萊塢9220042
TA貢獻(xiàn)377條經(jīng)驗(yàn) 獲得超508個(gè)贊
你好，這塊是這樣的，首先，不是瀏覽器自動(dòng)加的代碼，是你自己代碼里面給加的；其次，不是第二個(gè)li導(dǎo)致的這個(gè)問題，是第一個(gè)li里面的“<a class="on" href="#">”導(dǎo)致的。
使樣式變樣的是這行代碼就是：
li?a.on,?a:hover{color:white;background-color:#f60;height:40px;line-height:40px;?margin-top:-10px;}我修改下你的代碼，應(yīng)該是你想要的結(jié)果：
<!DOCTYPE?html><html><head><meta?charset="UTF-8"><title>水平圓角菜單導(dǎo)航</title><style?type="text/css">*????{margin:0;padding:0;}ul???{list-style:none;border-bottom:5px?solid?#f60;padding-left:30px;height:30px;margin-top:20px;line-height:30px;}a????{float:left;display:block;width:120px;text-decoration:none;text-align:center;color:black;background-color:#ccc;}li?a.on,?a:hover{color:white;background-color:#f60;height:40px;line-height:40px;?margin-top:-10px;}</style></head><body><ul><li><a?href="#">首??頁</li><li><a?href="#">關(guān)于我們</li><li><a?href="#">產(chǎn)品展示</li><li><a?href="#">售后服務(wù)</li><li><a?href="#">聯(lián)系我們</li></ul></body></html>可追問，另外便簽要寫規(guī)范，a標(biāo)簽要把閉合標(biāo)簽加上，剛開始學(xué)習(xí)規(guī)范的代碼會(huì)讓你以后受益很多的。
添加回答
舉報(bào)
0/150
提交
取消