为什么<li>设置了display：inline可以自动换行？
如果<li>什么都不设置，那<li>是单独占一行，感觉是行内元素。
行内元素如果遇到父元素的边框，应该是不会自动换行的。
在此例子中老师只是把<li>设置为display：inline，<li>就自动换行了。
感觉这个情况跟行内元素的性质冲突了，不太理解请高手解答，谢谢！
补充一下代码：其实就是按照视频里面老师代码敲的。
css文件：
*{ margin:0px; padding:0px;}
body{ font-size:12px; line-height:1.7;}
li{list-style:none;}
#content{width:800px; margin:0 auto; padding:20px ;}
#content h1{ color:#0088bb;}
#content .item{ padding:20px; margin-bottom:20px; border:2px dotted #0088bb;}
#content .item h2{
border:2px solid #0088bb; font-size:16px; font-weight:#0088bb;
margin-button:10px;}
#content .item li{ display:inline; margin-right:10px; }
#content .item li a img{ width:230px; height:230px; border:none; }
#menu{ width:80px; position:fixed; top:100px;
left:50%; margin-left:400px; }
HTML文件：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>地狗购物网-网页定位导航效果</title>
<link href="css/sp1css.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="menu">
<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">
<h1>地狗购物网</h1>
<div id="item1" class="item">
<h2>1F 男装</h2>
<ul>
<li><a href="#"><img src="imgs/1F.jpg"/></a></li>
<li><a href="#"><img src="imgs/1F.jpg"/></a></li>
<li><a href="#"><img src="imgs/1F.jpg"/></a></li>
<li><a href="#"><img src="imgs/1F.jpg"/></a></li>
<li><a href="#"><img src="imgs/1F.jpg"/></a></li>
<li><a href="#"><img src="imgs/1F.jpg"/></a></li>
<li><a href="#"><img src="imgs/1F.jpg"/></a></li>
<li><a href="#"><img src="imgs/1F.jpg"/></a></li>
<li><a href="#"><img src="imgs/1F.jpg"/></a></li>
</ul>
</div>
<div id="item2" class="item">
<h2>2F 女装</h2>
<ul>
<li><a href="#"><img src="imgs/2F.jpg"/></a></li>
<li><a href="#"><img src="imgs/2F.jpg"/></a></li>
<li><a href="#"><img src="imgs/2F.jpg"/></a></li>
<li><a href="#"><img src="imgs/2F.jpg"/></a></li>
<li><a href="#"><img src="imgs/2F.jpg"/></a></li>
<li><a href="#"><img src="imgs/2F.jpg"/></a></li>
<li><a href="#"><img src="imgs/2F.jpg"/></a></li>
<li><a href="#"><img src="imgs/2F.jpg"/></a></li>
<li><a href="#"><img src="imgs/2F.jpg"/></a></li>
</ul>
</div>
<div id="item3" class="item">
<h2>3F 美装</h2>
<ul>
<li><a href="#"><img src="imgs/3F.jpg"/></a></li>
<li><a href="#"><img src="imgs/3F.jpg"/></a></li>
<li><a href="#"><img src="imgs/3F.jpg"/></a></li>
<li><a href="#"><img src="imgs/3F.jpg"/></a></li>
<li><a href="#"><img src="imgs/3F.jpg"/></a></li>
<li><a href="#"><img src="imgs/3F.jpg"/></a></li>
<li><a href="#"><img src="imgs/3F.jpg"/></a></li>
<li><a href="#"><img src="imgs/3F.jpg"/></a></li>
<li><a href="#"><img src="imgs/3F.jpg"/></a></li>
</ul>
</div>
<div id="item4" class="item">
<h2>4F 数码</h2>
<ul>
<li><a href="#"><img src="imgs/4F.png"/></a></li>
<li><a href="#"><img src="imgs/4F.png"/></a></li>
<li><a href="#"><img src="imgs/4F.png"/></a></li>
<li><a href="#"><img src="imgs/4F.png"/></a></li>
<li><a href="#"><img src="imgs/4F.png"/></a></li>
<li><a href="#"><img src="imgs/4F.png"/></a></li>
<li><a href="#"><img src="imgs/4F.png"/></a></li>
<li><a href="#"><img src="imgs/4F.png"/></a></li>
<li><a href="#"><img src="imgs/4F.png"/></a></li>
</ul>
</div>
<div id="item5" class="item">
<h2>5F 母婴</h2>
<ul>
<li><a href="#"><img src="imgs/5F.jpg"/></a></li>
<li><a href="#"><img src="imgs/5F.jpg"/></a></li>
<li><a href="#"><img src="imgs/5F.jpg"/></a></li>
<li><a href="#"><img src="imgs/5F.jpg"/></a></li>
<li><a href="#"><img src="imgs/5F.jpg"/></a></li>
<li><a href="#"><img src="imgs/5F.jpg"/></a></li>
<li><a href="#"><img src="imgs/5F.jpg"/></a></li>
<li><a href="#"><img src="imgs/5F.jpg"/></a></li>
<li><a href="#"><img src="imgs/5F.jpg"/></a></li>
</ul>
</div>
</div>
</body>
