• absolute的left和right的妙用


    之前做了一个自定义鼠标右键的布局,做的过程中遇到了一个很有趣的问题,之前一直没有注意到。

    目标样式如下:

    期初并不知道文字内容需要随机,所以写的时候写“死”了。

    所有的内容都是按照设计的四个文字走的,给了,二级菜单“rightMouse_1”使用的是“position: absolute;left: 150px;”;一切都很完美,直到... ...发现突然有一个非“四字”的冒出来,文字折行显示了...怎么办?快给一个最小宽度,让它自适应吧~

    哦,不起作用,绝对定位以后,脱离了文档流,那怎么办?改。改。改。

    咦,可以了,我用了什么?

    只是把left换成了right就可以了。。。文字宽度就可以自适应了!

    就是这么神奇!

     1 <div class="rightMouse">
     2     <ul class="rightMouseLevel_1">
     3         <li>
     4             <a>一级菜单</a>
     5             <div class="rightMouse_1">
     6                 <ul class="rightMouseLevel_2">
     7                     <li><a>二级菜单</a></li>
     8                     <li><a>二级菜单</a></li>
     9                     <li><a>我是二级菜单例子</a></li>
    10                 </ul>
    11             </div>
    12         </li>
    13         <li><a>一级菜单</a></li>
    14         <li><a>一级菜单</a></li>
    15         <li><a>一级菜单</a></li>
    16         <li><a>一级菜单</a></li>
    17         <li><a>一级菜单</a></li>
    18     </ul>
    19 </div>
  • 相关阅读:
    实验3 颜色、字符串资源使用
    存储管理实验
    内存的分配与回收
    实验三
    JavaScript事件循环机制
    Js练习代码
    学习笔记(es6 react vue)
    express中间件的理解
    es6-Promise对象学习
    iscroll插件的使用
  • 原文地址:https://www.cnblogs.com/oyangyin/p/5006703.html
Copyright © 2020-2023  润新知