小白蛋挞 2022-04-24 16:50 采纳率: 85%
浏览 323
已结题

css浮动问题,浮动排列显示,不在一行显示,怎么回事呢,希望大家帮我解答

img


当我给.banner-nav ul li加了个height:20px就好了,这时为什么呢

img

 .banner-nav {
            height: 20px;
            margin-top: 20px;
        }
        
        .banner-nav ul li {
            float: left;
            height: 20px;
            /* 一开始没加就是第一张图效果 加了之后就好了   */
            color: #ccc;
        }
        
        .banner-nav ul li:nth-child(-n+3)::after {
            content: '';
            font-family: 'icomoon';
        }
        
        .content {
            height: 600px;
        }
        
        .content .iphone {
            float: left;
            width: 500px;
            height: 500px;
            border: 1px solid #ccc;
            margin-top: 5px;
        }
        
        .content .message {
            float: left;
        }

  <div class="banner-nav w">
        <ul>
            <li>
                <a href="#">手机、数码、通讯</a>
            </li>
            <li>
                <a href="#">手机</a>
            </li>
            <li>
                <a href="#">Apple苹果</a>
            </li>
            <li>
                <a href="#">iphone 6S Plus系统</a>
            </li>
        </ul>
    </div>
    <div class="content w">
        <div class="iphone"></div>
        <div class="message">
            <h3>wwwqqqqqqqqqqqqqqqqqqqqq</h3>
        </div>
    </div>

  • 写回答

2条回答 默认 最新

  • 雾里桃花 2022-04-24 17:00
    关注

    ul节点高度塌陷了,子节点使用float后会引起父节点的高度塌陷,给父节点添加overflow: hidden;就可以了
    ps: html节点使用float之后 该节点会脱离文档流,脱离文档流的意思就是脱离的父节点的控制。父节点监听不到子节点的高度就会导致高度塌陷,解决高度塌陷最简单的办法就是给父节点添加 overflow: hidden;
    .banner-nav ul {
    overflow: hidden;
    }

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 6月8日
  • 已采纳回答 5月31日
  • 创建了问题 4月24日

悬赏问题

  • ¥15 Sharepoint JS开发 付费技术指导
  • ¥15 输入程序运行仿真后,烟雾值不实时检测,变成固定值
  • ¥20 数据排序,可选择排序方向
  • ¥15 修改一下代码,考虑进程到达时间不同的情况
  • ¥15 帮我看看这是个啥题,带解题过程和结果,条件如下FCF = 290471.33 g1 = 15% r = 8% g2 = 4% n = 5
  • ¥15 edem模拟颗粒不显示或者生成失败
  • ¥15 Python代码编写
  • ¥15 php 将rtmp协议转hls协议,无法播放
  • ¥20 python代码编写
  • ¥20 使用MPI广播数据遇到阻塞