2-4-编程练习的居中方法？
如以下代码所示，使用居中方法1，当浏览器窗口缩小时，慕课网logo能够完整显示。
使用居中方法2，当浏览器窗口缩小时，慕课网logo不能够完整显示。
这是为什么呢？
代码中存在的其它问题，请老师批评指正。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>2-4-编程练习.html</title>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
a
{text-decoration: none;}
a:link,
a:visited,
a:active
{color: #FFF;}
a:hover
{color: #F00;}
nav
{
position: absolute;
min-width: 1100px; /* 定宽1100px */
width: 1100px;
min-height: 100px;
height: 100px; /* 定高100px */
line-height: 100px;
color: #FFF;
background-color: #000;
/* 居中方法1 */
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
/* 居中方法2 */
/*top: 50%;*/
/*left: 50%;*/
/*margin-top: -50px;*/
/*margin-left: -550px;*/
}
h1,
h1 > a /* 导航logo定高 */
{
display: inline-block;
width: 300px;
height: 100px;
}
#nav-list /* 导航列表 */
{
display: inline-block;
position: absolute;
left: 500px; /* 因为父元素nav定宽1100px */
width: 600px; /* 若left定为500px，则width=1100-500=600px */
height: 100px;
}
#nav-list > li /* 导航列表项 */
{
display: inline-block;
font: 16px "微软雅黑";
}
#nav-list > li:nth-child(n) /* 导航项文字之间距离70px */
{margin-left: 70px;}
</style>
</head>
<body>
<nav>
<h1><a href="http://www.imooc.com" target="_blank"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"></a></h1>
<ul id="nav-list">
<li><a href="https://www.imooc.com/course/list" target="_blank">课程</a></li>
<li><a href="https://class.imooc.com/" target="_blank">职业路径</a></li>
<li><a href="https://coding.imooc.com/" target="_blank">实战</a></li>
<li><a href="https://www.imooc.com/wenda" target="_blank">猿问</a></li>
<li><a href="https://www.imooc.com/article" target="_blank">手记</a></li>
</ul>
</nav>
</body>
</html>0
收起
正在回答 回答被采纳积分+1
1回答
相似问题
步骤一 4-2的编程练习
0
1
3
2-9编程练习
30
0
5
编程练习.。
0
0
2
老师，第2章 内部类的编程练习呢，是不是漏了
23
0
3
在编程练习的时候，输入中文的时候老有问题。
41
0
15
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星