码迷,mamicode.com
首页 > 其他好文 > 详细

absolute的left和right的妙用

时间:2015-11-30 13:11:48      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:

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

目标样式如下:

技术分享

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

所有的内容都是按照设计的四个文字走的,给了,二级菜单“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>

 

absolute的left和right的妙用

标签:

原文地址:http://www.cnblogs.com/oyangyin/p/5006703.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!