为什么ul标签的css样式设置了{margin:0px auto;}却不能居中显示

来源:3-4 编程练习

慕的地0823274

2018-07-12 16:03:48



代码如下

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

html body{

margin:0px;

}

a{

text-decoration: none;

}

ul{

list-style: none;

margin:0px auto;

}

.up{

margin:0px auto;

text-align: center;

overflow: hidden;

zoom: 1;

}

.up .left{

float:left;

padding:5px 20px;

}

.down{

margin:0px auto;

text-align: center;

}

.down .left{

float:left;

padding:5px 20px;

}

</style>

</head>

<body>

<div class="up">

<ul>

<li class="left"><a href=""><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg" alt=""><br>

欢迎来学习慕课新知识</a></li>

<li class="left"><a href=""><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg" alt=""><br>

欢迎来学习慕课新知识</a></li>

<li class="left"><a href=""><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg" alt=""><br>

欢迎来学习慕课新知识</a></li>

</ul>


</div>

<div class="down">

<ul>

<li class="left"><a href=""><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg" alt=""><br>

欢迎来学习慕课新知识</a></li>

<li class="left"><a href=""><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg" alt=""><br>

欢迎来学习慕课新知识</a></li>

<li class="left"><a href=""><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg" alt=""><br>

欢迎来学习慕课新知识</a></li>

</ul>


</div>

</body>

</html>

显示入土、图片http://img.mukewang.com/climg/5b470b2100017a4413530672.jpg

写回答

1回答

imooc_澈

2018-07-12

你好,因为ul没有给宽度,给它一个宽,比如:1000px

http://img.mukewang.com/climg/5b4719e6000186a202880207.jpg

这样margin:0 auto;就能发挥作用了。

如果解决了你的问题,请采纳,祝学习愉快~

1

0 学习 · 4928 问题

查看课程