为了账号安全,请及时绑定邮箱和手机立即绑定

为什么我的两个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>


正在回答

1 回答

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

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

http://img1.sycdn.imooc.com//6335c7440001f65415890753.jpg

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

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



0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

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

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信