二级菜单和三级菜单设置绝对定位,那么三级菜单的文本内容会出现换行,要给其设置宽度才不会换行

二级菜单和三级菜单设置绝对定位,那么三级菜单的文本内容会出现换行,要给其设置宽度才不会换行

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style type="text/css">

        .div1{

        position: relative;

       

       

        

        }

        .div2{

        position:absolute;

           

          

        left:32px;      

        }

        .div3{

        position:absolute;

        left:32px;

        width:32px;

        }

        

       

</style>

</head>

<body>


<div class="div1">我的

<div class="div2">我的

               <div class="div3">我的</div>

</div>

</div>

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>

<script type="text/javascript">

</script>


</body>

</html>


正在回答

登陆购买课程后可参与讨论,去登陆

1回答

因为三者包含关系,不设置定位和宽度,效果如下:

http://img1.sycdn.imooc.com//climg/5a9baa35000167a307600077.jpg

设置了定位:

http://img1.sycdn.imooc.com//climg/5a9baaa800011e1907550095.jpg

可以看出,div3 宽度以div2 为准,不给div3这设置宽度,给div2 设置宽度一样可以达到效果 。

因为这种关系,所以出现问题,这时要设置宽度来调整。

希望解决你的疑问,欢迎采纳,祝学习愉快。


  • qq__9987 提问者 #1
    非常感谢!
    2018-03-05 20:29:16
  • qq__9987 提问者 #2
    我懂了,因为边框的问题,所以后面的宽度都会小于前面的,因此文本内容宽度溢出了,所以会出现换行,应该是这个原因。
    2018-03-05 20:42:19
  • 小于飞飞 回复 提问者 qq__9987 #3
    理解正确,说明掌握了该知识,多动手实战,加油!
    2018-03-06 09:23:40
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师