问答详情
源自：4-1 使用jQuery实现网页定位导航（上）

为什么<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> 

提问者：edward12 2015-11-20 11:33

个回答

  • 李晓健
    2015-11-20 12:18:58
    已采纳

    给一下完整代码

    0
  • 李晓健
    2015-11-20 13:21:24

    li 默认的    display: list-item;    这个应该和block 差不多，是独占一行的。也可以设置宽高。所以不会换行。你改成了display:inline-block; 会就不会独占一行了，但是还是可以设置宽和高。

    0
  • edward12
    2015-11-20 13:00:18

    补充一下代码：其实就是按照视频里面老师代码敲的。

    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-block;  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>


    0