老师帮忙检查一下，看看有没有啥问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding:0;
margin:0;
}
.nav{
width:1100px;
height:100px;
background:black;
overflow:hidden;
position:absolute;
margin:auto;
top:0;
bottom:0;
right:0;
left:0;
}
.img4 img{
height:100px;
width:300px;
float:left;
}
ul{
overflow:hidden;
position:relative;
top:50%;
left:150px;
margin-top:-15px;
}
ul li{
list-style:none;
float:left;
color:white;
height:30px;
font-size:25px;
margin-left:50px;
}
</style>
</head>
<body>
<div class="nav">
<div class="img4">
<a href="#"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/></a>
</div>
<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>
</body>
</html>
正在回答 回答被采纳积分+1
用户“我学习太差被关起来了”你好
（1）就这个练习而言，ul中可以包含li标签页可以包含别的标签。
一般的网页中，导航项是这样的形式 <li><a href="#">课程</a></li>。因为会考虑到点击导航跳转别的页面，所以会使用li>a。并不是不规范
（2）因为logo下侧没有元素布局，所以这里高度坍塌也是无所谓的，不会影响到其他元素。
（3）这里的img4中的图片设置了浮动，默认不独占一行（会和ul同排显示），和设置了内联块是一样的效果。
现阶段中我们主要是对这些知识的认识和掌握，所以目前没必要要求太严格的规范。另，关于代码规范性其实有很多学问的，同学有兴趣的话可以研究下
祝学习愉快~
【1】ul的子元素只能是li，代码不规范。
【2】logo使用了浮动，造成祖先元素高度坍塌（F12检查可见），解决办法overflow:hidden。
【3】class="img4"的div与ul位于同一行上，违背了盒子模型块元素的特点，建议转换为inline-block。
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星