请老师帮忙检查一下,我写的代码有什么问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{margin:0;padding:0;}/*清除内外边距*/
div.container{width:1100px;
height:100px;
background:black;
position:absolute;
/*绝对定位,目的:水平、垂直居中显示*/
top:50%;
left:50%;/*定位:盒子左上角居中显示*/
margin-top:-50px;
margin-left:-550px;
/*边距:盒子整体居中显示*/
overflow:hidden;
*zoom:1;
/*清除浮动,是否多余?*/
}
div.logo{width:600px;
float:left;}
div.nav ul{list-style-type:none;
/*列表样式:无。清除无序列表前面的实心点*/
overflow:hidden;
*zoom:1;
}
div.nav ul li{width:100px;
height:100px;
line-height:100px;/*<a>中内容竖直居中*/
float:left;}
div.nav ul li a{text-decoration:none;
color:white;
font-size:20px;}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="container">
<div class="logo">
<a href="#"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"></a>
</div>
<div class="nav">
<ul>
<li><a href="#">课程</a></li>
<li><a href="#">职业路径</a></li>
<li><a href="#">实战</a></li>
<li><a href="#">猿问</a></li>
<li><a href="#">手记</a></li>
</ul>
</div>
</div>
</body>
</html>
另外:container已经设置长宽,再写{overflow:hidden;*zoom:1;}是否多余?1
收起
正在回答
2回答
你好,
给nav导航整体设置右浮动是不会出现导航项顺序相反情况的:

效果:

同学是将li设置的左浮动改成右浮动了吗?如果是这样的话,导航项顺序就会相反哦。html中前面的元素就会先浮动到右侧。
如果将nav设置成右浮动,就是整个盒子右浮动,在container盒子中右侧显示,而里面的li元素还是左浮动的,所以顺序不会变。
自己可以再测试下,如果找不出问题,可以将修改后的代码粘贴上来,老师帮助你测试。
祝学习愉快!
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!
了解课程


恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星