代码写出来，但是浏览器自动添加了一行代码导致显示结果不同
浏览器自动在第二个 li 处加了一个class，导致第一个 li 的宽度变大，本人写的代码如下：水平圆角菜单导航* {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;}
- <a class="on" href="#">首 页
- <a href="#">关于我们
- <a href="#">产品展示
- <a href="#">售后服务
- <a href="#">联系我们
|
免责声明：本内容仅代表回答者见解不代表本站观点，请谨慎对待。
版权声明：作者保留权利，不代表本站立场。
|
|
|
|
|
|
|
|
你好，这块是这样的，首先，不是浏览器自动加的代码，是你自己代码里面给加的；其次，不是第二个li导致的这个问题，是第一个li里面的“<a class="on" href="#">”导致的。
使样式变样的是这行代码就是：
lia.on,a:hover{color:white;background-color:#f60;height:40px;line-height:40px;margin-top:-10px;}我修改下你的代码，应该是你想要的结果：
水平圆角菜单导航*{margin:0;padding:0;}ul{list-style:none;border-bottom:5pxsolid#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;}lia.on,a:hover{color:white;background-color:#f60;height:40px;line-height:40px;margin-top:-10px;}
可追问，另外便签要写规范，a标签要把闭合标签加上，刚开始学习规范的代码会让你以后受益很多的。 |
|
|
|
|
|
|
|
|
微信访问
手机APP
