问答详情
源自：10-1 编程挑战

为什么我的两个div是并排的，div不是块级元素吗

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>实践题 - 选项卡</title>

    <style type="text/css">

     /* CSS样式制作 */  

      ul{

          list-style:none;

           margin:0;

           padding:0;

      }

      ul>li{

           float:left;

           width:90px;

           height:42px;

           border:1px solid grey;

           margin:0 5px;

           line-height:40px;

           border-bottom:none;

           text-align:center;

      }

       

    </style>

    <script type="text/javascript">

         

    // JS实现选项卡切换

    

    

    </script>

 

</head>

<body>

<!-- HTML页面布局 -->

<div>

    <ul>

        <li>房产</li>

        <li>家居</li>

        <li>二手货</li>

    </ul>    

</div>


<div>

    275万购昌平邻铁三居 总价20万买一居

    200万内购五环三居 140万安家东三环

    北京首现零首付楼盘 53万购东5环50平

    京楼盘直降5000 中信府 公园楼王现房

</div>


 

</body>

</html>


提问者：慕慕4374729 2022-07-13 14:06

个回答

  • qq_爱偷猫的鱼_0
    2022-09-30 00:35:00

    DIV确实是块级元素，独立一行显示

    F12--元素 可以看到，你的第一个DIV实际高度为0，第二个DIV才有真实高度

    http://img3.mukewang.com/6335c7440001f65415890753.jpg

    原因在哪里呢？将添加在li上的浮动属性去掉就恢复正常了
    http://img1.mukewang.com/6335c86c00011d4c12780787.jpg

    造成这个现象的原因是元素浮动Float后会脱离标准文档流，所以第一个DIV没有被撑开，详细原理看链接https://blog.csdn.net/Czc1357618897/article/details/122980847



    0