为什么我设置了margin：0 auto；但是居中不了，而且宽度是整个屏幕-慕课网

为什么我设置了margin：0 auto；但是居中不了，而且宽度是整个屏幕

来源：4-1 使用jQuery实现网页定位导航（上）

满满肥肉的夏天

2016-06-07 17:23

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta charset="utf-8">
	<title>网页定位导航</title>
	<style>
	* { margin: 0;padding: 0; }
	ul{list-style: none;}
	a{text-decoration: none};

	#content {
		width: 800px;
		margin: 0 auto;
		padding: 20px;
		
	}
    #content h3{
    	color: #1f1f1f;
    }
    #content .item {
    	padding: 20px;
    	border:1px dotted #0088bb;
    }
    #content .item h4 {
    	font-size: 16px;
    	border-bottom: 2px solid #08b;
    	margin-bottom: 10px;
    }
    #content .item li {
    	display: inline;
    	margin-right: 16px;
    }
    #content .item li a img {
    	width: 230px;
    	height:230px;
    }

	</style>
</head>
<body>
<div>
    <ul>
	    <li><a href="#">1F 男装</a></li>
	    <li><a href="#">2F 女装</a></li>
	    <li><a href="#">3F 美妆</a></li>
	    <li><a href="#">4F 数码</a></li>
	    <li><a href="#">5F 母婴</a></li>
    </ul>
</div>
<div id="content">
    <h3>天猫购物商城</h3>
	
	<div id="item1" class="item">
		<h4>1F 男装</h4>
		
		<ul>
			<li><a href="#"><img src="./img/1F.jpg" alt="1F"></a></li>
			<li><a href="#"><img src="./img/1F.jpg" alt="1F"></a></li>
			<li><a href="#"><img src="./img/1F.jpg" alt="1F"></a></li>
			<li><a href="#"><img src="./img/1F.jpg" alt="1F"></a></li>
			<li><a href="#"><img src="./img/1F.jpg" alt="1F"></a></li>
			<li><a href="#"><img src="./img/1F.jpg" alt="1F"></a></li>
			<li><a href="#"><img src="./img/1F.jpg" alt="1F"></a></li>
			<li><a href="#"><img src="./img/1F.jpg" alt="1F"></a></li>
			<li><a href="#"><img src="./img/1F.jpg" alt="1F"></a></li>
		</ul>
	</div>
	<div id="item2" class="item">
		<h4>2F 女装</h4>
		<ul>
			<li><a href="#"><img src="./img/2F.jpg" alt="2F"></a></li>
			<li><a href="#"><img src="./img/2F.jpg" alt="2F"></a></li>
			<li><a href="#"><img src="./img/2F.jpg" alt="2F"></a></li>
			<li><a href="#"><img src="./img/2F.jpg" alt="2F"></a></li>
			<li><a href="#"><img src="./img/2F.jpg" alt="2F"></a></li>
			<li><a href="#"><img src="./img/2F.jpg" alt="2F"></a></li>
			<li><a href="#"><img src="./img/2F.jpg" alt="2F"></a></li>
			<li><a href="#"><img src="./img/2F.jpg" alt="2F"></a></li>
			<li><a href="#"><img src="./img/2F.jpg" alt="2F"></a></li>
		</ul>
	</div>
	<div id="item3" class="item">
		<h4>3F 美妆</h4>
		<ul>
			<li><a href="#"><img src="./img/3F.jpg" alt="3F"></a></li>
			<li><a href="#"><img src="./img/3F.jpg" alt="3F"></a></li>
			<li><a href="#"><img src="./img/3F.jpg" alt="3F"></a></li>
			<li><a href="#"><img src="./img/3F.jpg" alt="3F"></a></li>
			<li><a href="#"><img src="./img/3F.jpg" alt="3F"></a></li>
			<li><a href="#"><img src="./img/3F.jpg" alt="3F"></a></li>
			<li><a href="#"><img src="./img/3F.jpg" alt="3F"></a></li>
			<li><a href="#"><img src="./img/3F.jpg" alt="3F"></a></li>
			<li><a href="#"><img src="./img/3F.jpg" alt="3F"></a></li>
		</ul>
	</div>
	<div id="item4" class="item">
		<h4>4F 数码</h4>
		<ul>
			<li><a href="#"><img src="./img/4F.png" alt="4F"></a></li>
			<li><a href="#"><img src="./img/4F.png" alt="4F"></a></li>
			<li><a href="#"><img src="./img/4F.png" alt="4F"></a></li>
			<li><a href="#"><img src="./img/4F.png" alt="4F"></a></li>
			<li><a href="#"><img src="./img/4F.png" alt="4F"></a></li>
			<li><a href="#"><img src="./img/4F.png" alt="4F"></a></li>
			<li><a href="#"><img src="./img/4F.png" alt="4F"></a></li>
			<li><a href="#"><img src="./img/4F.png" alt="4F"></a></li>
			<li><a href="#"><img src="./img/4F.png" alt="4F"></a></li>
		</ul>
	</div>
	<div id="item5" class="item">
		<h4>5F 母婴</h4>
		<ul>
			<li><a href="#"><img src="./img/5F.jpg" alt="5F"></a></li>
			<li><a href="#"><img src="./img/5F.jpg" alt="5F"></a></li>
			<li><a href="#"><img src="./img/5F.jpg" alt="5F"></a></li>
			<li><a href="#"><img src="./img/5F.jpg" alt="5F"></a></li>
			<li><a href="#"><img src="./img/5F.jpg" alt="5F"></a></li>
			<li><a href="#"><img src="./img/5F.jpg" alt="5F"></a></li>
			<li><a href="#"><img src="./img/5F.jpg" alt="5F"></a></li>
			<li><a href="#"><img src="./img/5F.jpg" alt="5F"></a></li>
			<li><a href="#"><img src="./img/5F.jpg" alt="1F"></a></li>
		</ul>
	</div>
</div>

</body>
</html>

写回答关注

2回答

追觅梦初的国度

2016-07-31 12:04:45

你的宽度没起作用，所以就居中不了。

0 0
宝慕林7503893

2016-06-07 18:26:22

* { margin: 0;padding: 0; }
ul{list-style: none;}
a{text-decoration: none}; //你这里多写了一个 ; 号。代表结束。后边的不执行咯

0 0

网页定位导航特效

本课程讲解网页定位导航特效，仿天猫版地狗购物网，你值得拥有

71394 学习 · 504 问题

查看课程

相似问题

为什么我的图片设置230px不能显示九宫格呢？第一列图片前面还有空白不是居中

回答 2

菜单只居中，不偏移，margin-left无效

回答 1

这个坏了吧，都学完了，进度条还是95%？

回答 2

为什么<li>设置了display：inline可以自动换行？

回答 4

不设置li为行内元素，设置图片为左浮动为什么就不行

回答 2

打开慕课网App查看更多内容