浏览器自动在第二个 li 处加了一个class，导致第一个 li 的宽度变大，本人写的代码如下：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>水平圆角菜单导航</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="#">关于我们</li><li><a href="#">产品展示</li><li><a href="#">售后服务</li><li><a href="#">联系我们</li></ul></body></html>
2 回答
已采纳
慕莱坞9220042
TA贡献377条经验 获得超508个赞
你好，这块是这样的，首先，不是浏览器自动加的代码，是你自己代码里面给加的；其次，不是第二个li导致的这个问题，是第一个li里面的“<a class="on" href="#">”导致的。
使样式变样的是这行代码就是：
li a.on, a:hover{color:white;background-color:#f60;height:40px;line-height:40px; margin-top:-10px;}我修改下你的代码，应该是你想要的结果：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>水平圆角菜单导航</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="#">关于我们</li><li><a href="#">产品展示</li><li><a href="#">售后服务</li><li><a href="#">联系我们</li></ul></body></html>可追问，另外便签要写规范，a标签要把闭合标签加上，刚开始学习规范的代码会让你以后受益很多的。
- 2 回答
- 0 关注
- 1645 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消