• overflow第一次觉得你有点可恶


    今天用css做下拉菜单,因为不需要做手机自适应,再手机里看起来工整一点就行,可是列表中最后一个li的宽度撑开了父div,导致看起来很糟糕,所以给父元素加overflow:hidden;但是下拉列表也被隐藏了!

    主要代码如下 <!-- f代表father ul; c代表 child ul--> 。

    <div>
        <ul class=“f”>
            <il>
                 点我下拉
                 <ul class="c">
                      <il>1</li>
                      <il>2</li>
                      <il>3</li>
                 </ul>
            <li>
            <li>没有下拉</li>
            <li>没有下拉</li>
            <li>没有下拉</li>
        </ul>    
    </div>    
    div { width:1000px; overflow:hidden; }
    
    .f>li {position:relative; float:left;}
    
    .c { display:none; position:absolute, }
    
    .f>li:hover .c{display:block;}

    我本以为 ul.c 已经脱离了文档流,不会受div overflow:hidden的限制,但事实却还是把它隐藏了。

    因为 ul.c 脱离了文档流,,虽然下拉列表出现并不会撑开ul.f,但却受 ul.fa relative 的控制, 加上 ul.fa 的祖先是div,所以div依旧是他们的老祖宗,把下面几个小虾米全给隐藏掉了。

    明白了这个,我觉得让ul.c 成为 div的祖先,这样才可以脱离它的掌控。

    于是我把ul.fa的relative取消了,让ul.c相对于body定位,这样的确脱离了被隐藏的厄运,但是却无法与ul.f一一对应了,因为ul.c是loop出来的,没办法单独加class真是避坑落井啊!

    于是我还是寻求css方面的突破吧,继续冥思苦想

    既然ul.f的relative不可以去掉,那么如果它的父元素也就是div 只要有overflow就会对他生效,下面的子孙就免不了被隐藏的厄运。

    所以就不要设置overflow了,那么超出父元素的 li 该如何解决呢?

    唯一的办法就是把ul.f li 设置成百分比布局,不让他超出。

    看来这是唯一的办法,

    可能我的水平low,无法从overflow的魔爪下救出c。

  • 相关阅读:
    异常练习
    Comparator 排序 ArrayList 实操练习
    50道Java线程面试题
    Java ArrayList排序方法详解
    Map集合利用比较器Comparator根据Key和Value的排序
    Java Map 键值对排序 按key排序和按Value排序
    实现java随机数Random的几招
    如何在Java中获取键盘输入值
    力扣 ——3Sum python (三数之和)实现
    python中函数用法
  • 原文地址:https://www.cnblogs.com/heqinglin/p/5416295.html
Copyright © 2020-2023  润新知