代码写出来，但是浏览器自动添加了一行代码导致显示结果不同
浏览器自动在第二个 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>
syni浏览 1586回答 2
2回答
-
慕莱坞9220042
你好，这块是这样的，首先，不是浏览器自动加的代码，是你自己代码里面给加的；其次，不是第二个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标签要把闭合标签加上，刚开始学习规范的代码会让你以后受益很多的。 -
西兰花伟大炮
虽然没看懂你要问什么，但是你先把a标签闭合吧
随时随地看视频慕课网APP
Html5
Html/CSS
CSS3