顶部右导航，划过位置为何不对齐？
<!DOCTYPE html>
<html>
<head>
<title>慕淘网作业</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/css.css">
</head>
<body>
<!--顶部内容-->
<!--设置左内填充无效，鼠标滑过边框有轻微变化，-->
<div class="top-box">
<ul class="top-left">
<li class="red"><a href="#">亲，请登录</a></li>
<li><a href="#">免费注册</a></li>
<li><a href="#">手机逛慕淘</a></li>
</ul>
<ul class="top-right">
<li>
<a href="#">我的慕淘<img src="素材/icon/21.png" class="img1"></a>
<div class="submenu">
<div class="a">已买到的宝贝</div>
<div class="a">我的足迹</div>
</div>
</li>
<li><a href="#">收藏夹<img src="素材/icon/21.png"></a></li>
<li><a href="#">商品分类</a></li>
<li><a href="#">卖家中心<img src="素材/icon/21.png"></a></li>
<li><a href="#">联系客服<img src="素材/icon/21.png"></a></li>
</ul>
</div>
<div class="logo-box">
<div class="logo"><img src="素材/logo.png"></div>
<input type="text" name="" class="text"><input type="button" name="" class="button" value="搜索">
<div class="gouwuche">
<img src="素材/icon/26.png" class="left-img">
<span>购物车 | 0</span>
<img src="素材/icon/23.png" class="right-img">
</div>
</div>
<script type="text/javascript">
var a=document.getElementsByTagName('li')[3];
var b=document.getElementsByTagName('div')[1];
var c=document.getElementsByTagName('img')[0];
a.onclick=function(){
b.style.display="block";
a.className="js1"
c.setAttribute("src","素材/icon/24.png")
}
</script>
</body>
</html>
*{
margin: 0;
padding: 0;
list-style: none;
font-size: 15px;
}
a{
text-decoration: none;
color: #4d555d;
}
.top-box{
width: 1200px;
width: 1200px;
height: 40px;
background-color: #f3f5f7;;
margin: 0 auto;
line-height: 40px;
border-bottom: solid #bfc3c7 1px;
}
.top-left{
float: left;
margin-left: 20px;
}
.top-right{
float: right;
margin-right: 20px;
}
.top-right li{
width: 110px;
text-indent: 5px;
/*position: relative;*/
position: relative;
margin: 0 5px;
box-sizing: border-box;
}
.top-right li img{
position: relative;
top: 2.5px;
left: 2.5px;
}
.top-box ul li{
float: left;
}
.top-left li{
margin: 0 10px;
}
.red a{
color: red;
}
.submenu{
width: auto;
display: none;
position: absolute;
top: 40px;
background-color: #fff;
border: solid #bfc3c7 1px;
}
.js2{
/*position: absolute;
top: 40px;
border: solid #bfc3c7 1px;
background-color: #fff;*/
}
.submenu .a{
width: 110px;
height: 30px;
line-height: 30px;
text-indent: 5px;
}
.js1{
background-color: #fff;
border: solid #bfc3c7 1px;
}
.logo-box{
width: 1200px;
height: 130px;
margin: 0 auto;
}
.logo-box .logo{
margin-top: 40px;
float: left;
margin-left: 20px;
}
.text{
width: 600px;
height: 30px;
float: left;
margin-top: 50px;
margin-left: 80px;
}
.button{
width: 50px;
height: 33px;
float: left;
background-color: black;
border: none;
color: #fff;
margin-top: 49px;
}
.gouwuche{
width: 140px;
height: 33px;
background-color: red;
float: right;
line-height: 33px;
font-size: 12px;
margin-top: 50px;
margin-right: 20px;
}
正在回答
你好同学 ,因为默认下拉菜单是和导航内容区域最左边对齐 ,不包含border部分 ,所以下拉菜单看起来会往右偏移了1px , 所以可以结合定位中设置偏移值 ,让下拉菜单往左移动1px就能对齐了 :
另外 ,这里要注意的是 , 下拉菜单内容是110px ,加上左右边框 ,实际宽度为112px .但是由于li设置了box-sizing: border-box; ,所以li的左右边框会算入到li的width中 ,实际宽度即为110px ,比下拉菜单少了2px ,所以建议把如下属性去掉 ,这样让导航与下拉菜单宽度保持一致更好
希望对你有帮助 , 祝学习愉快 ,望采纳 .
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星