请老师帮忙检查一下,非常谢谢!
来源：2-4 编程练习
bao_
2020-01-22 18:53:47
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.nav_content {
width: 1100px;
height: 100px;
line-height: 100px;
background: black;
margin: 0 auto;
position: absolute;
left: 50%;
top: 50%;
margin-left: -550px;
margin-top: -50px;
}
.nav_logo img {
width:300px;
float: left;
}
a {
text-decoration: none;
color:white;
}
.nav-right ul{
list-style:none;
float:right;
}
.nav-right ul li{
display: inline-block;
margin: 5px 40px;
font-size:21px;
}
/* .nav-right ul li:nth-child(5){
margin: 0 50px 0 0;
} */
</style>
</head>
<body>
<div class="nav_content">
<div class="nav_logo">
<a href="#"><img src="http://img1.sycdn.imooc.com\/climg/58c0d2d900016ce303000100.png" /></a>
</div>
<div class="nav-right">
<ul>
<a href="#">
<li>课程</li>
</a>
<a href="#">
<li>职业路径</li>
</a>
<a href="#">
<li>实战</li>
</a>
<a href="#">
<li>猿问</li>
</a>
<a href="#">
<li>手记</li>
</a>
</ul>
</div>
</div>
</body>
</html>
我想定位到最后一个li,在代码注释那块,定位不到,还请老师讲解,还有就是我取消项目列表符号是在ul还是li上面,还有这个外边距在什么时候重叠在什么时候不会重叠呢,非常感谢!
1回答
-
同学你好，代码中问题：
（1）顶部导航布局不规范，建议使用了li标签嵌套a标签：
（2）定位到最后一个li无法找到的原因：之前由于是a标签嵌套li表现，ul下还有a标签，因此无法找到第五个li。如（1）中修改之后，就可以定位到了：
（3） 取消项目列表符号list-style:none;设置在ul或者是li上面都是可以的，因为此属性有继承性。
（4）外边距重叠发生在上下排列中，如下情况：
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0h020-01-23
相似问题