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>
原文地址:https://www.cnblogs.com/oyangyin/p/5006703.html