老师帮检查一下
来源：2-10 编程练习
weixin_慕姐2024005
2020-07-13 16:19:42
老师，列表为什么不可以用margin居中，我用的是display：table，而且这和display：table我没怎么理解，是在网上查的，老师可以讲解一下吗
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding:0;
margin:0;
font-family:"微软雅黑";
}
a{
text-decoration:none;
}
li{
list-style: none;
}
.header{
background:black;
width:100%;
overflow:hidden;
}
.logo{
float:left;
margin-top:4px;
}
.nav{
float:right;
}
.nav li{
float:left;
line-height:104px;
font-size:22px;
font-weight:bold;
margin-right:35px;
}
.nav li a{
color:white;
}
.body{
background:#40E0D0;
width:100%;
height:1800px;
}
.left{
width:50%;
float:left;
}
.left ul{
margin-left:300px;
margin-top:150px;
font-size:20px;
}
.left li a{
line-height:2em;
color:black;
}
.left span{
background:pink;
}
.right{
width:50%;
float:right;
}
.right ul{
margin-left:300px;
margin-top:150px;
font-size:20px;
}
.right li a{
color:black;
line-height: 2em
}
.footer{
background:black;
width:100%;
overflow:hidden;
}
.footer ul{
display:table;
margin:0 auto;
}
.footer li{
margin-right:15px;
margin-left:15px;
float:left;
}
.footer li a{
font-size:22px;
font-weight:bold;
line-height:104px;
color:white;
}
</style>
</head>
<body>
<div class="content">
<div class="header">
<div class="logo">
<a href="#"><img src="tupian\58c0d2d900016ce303000100.jpg"/></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>
<div class="body">
<div class="left">
<ul>
<li><h3>课程推荐</h3></li>
<li><span>职业路径</span> <a href="#">HTML5与CSS3实现动态网页</a></li>
<li><span>职业路径</span> <a href="#">零基础入门Android语法与界面</a></li>
<li><span>职业路径</span> <a href="#">IOS基础语法与常用控件</a></li>
<li><span>职业路径</span> <a href="#">PHP入门开发</a></li>
<li><span>职业路径</span> <a href="#">JAVA入门开发</a></li>
</ul>
</div>
<div class="right">
<ul>
<li><h3>相关课程</h3></li>
<li><a href="#">HTML</a> <a href="#">CSS</a> <a href="#">JavaScript</a></li>
<li><a href="#">HTML</a> <a href="#">CSS</a> <a href="#">Jquery</a></li>
<li><a href="#">移动端基础</a> <a href="#">APP开发</a></li>
</ul>
</div>
</div>
<div class="footer">
<div>
<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>
<li><a href="#">友情链接</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
1回答
-
好帮手慕言
2020-07-13
同学你好，有几点问题需要注意
1、因为同学使用的是相对路径，在老师这边是不能正常显示的，因此老师替换成了下面这张
<img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png" />
2、img标签自带间隙，为了防止高度溢出父级，可以给img设置为块元素，例如：
图片的高度为100px，可以不用设置margin-top值
关于同学的疑问，解答如下：
1、ul的宽度与父级的宽度是一样的，因此设置margin:0 auto不能实现效果，建议：可以给ul的宽度调整小些，即可配合margin:0 auto实现居中。
2、display: table;就是把元素转换为表格 ，类似于<table>
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
相似问题