课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

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

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

edward12

2015-11-20 11:33

 如果<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> 

写回答 关注

3回答

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

    给一下完整代码

    2 0

    edward...

    非常感谢您的回答

    2015-11-20 16:22:23

    共 2 条回复 >

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

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

    2 0

    李晓健 回复edward...

    inline 和 inline-block 超过父元素会换行的。 行内元素不是留在一行内，而是他的宽度和高度是由内容撑起来，设置宽度和高度是无效的。

    2015-11-20 15:48:43

    共 2 条回复 >

  • 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 0

网页定位导航特效

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

71404 学习 · 486 问题

查看课程

相似问题

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

回答 2

为什么当滚动条滚动时，导航菜单没能自动设置焦点呢？错在哪了，请大神指教

回答 2

为什么设置图片背景？！

回答 1

为什么原生js滚动切换没效果，大神来看一看

回答 2

#menu ul li a:hover, 这什么意思

回答 2

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