CSS绝对定位元素内文本自动换行问题 -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

CSS绝对定位元素内文本自动换行问题

杨冬芳 2016-06-06 15:03:48 3525

我在做一个有二级菜单的导航条,结果见http://jsfiddle.net/jwmguLys/点击预览
HTML:

<div id="main">
    <ul class="nav">
        <li><a>title 1</a></li>
        <li><a>title 2</a></li>
        <li>
            <a>title 3</a>
            <ul>
                <li><a>subtitle 1 subtitle 1</a></li>
                <li><a>subtitle 2 subtitle 2</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS:

        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        #main {
            background-color: blue;
            text-align: center;
        }
        .nav > li {
            position: relative;
            display: inline-block;
            background-color: red;
        }

        .nav ul {
            position: absolute;
        }

        .nav li li {
            text-align: left;
            display: block;
        }

当我将第一级菜单项.nav > li 添加positon: relative时,效果如下图:
screenshot
我想知道是什么原因导致了第一种情况下二级菜单的内容自动换行而第二种情况下却没有自动换行。

前端开发
分享到
取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:28:41

    父元素relative 子元素absolute
    子元素在没有设置宽度的情况下,最大宽度等于父元素的宽度。
    但是由于连续的英文字母或者数字是不会自动折行的,所以在你的例子中,subtitle会完整显示,撑开li/ul的宽度。
    如果你将四个subtitle中某一个单词加长:

    <div id="main">
        <ul class="nav">
            <li><a>title 1</a></li>
            <li><a>title 2</a></li>
            <li>
                <a>title 3</a>
                <ul>
                    <li><a>subtitleeeeeeeeee 1 subtitle 1</a></li>
                    <li><a>subtitle 2 subtitle 2</a></li>
                </ul>
            </li>
        </ul>
    </div>

    li标签是块元素,会填满整个宽度,所以当某个li撑开父元素ul的宽度时,其他的li也会填满宽度,在连续英文字母不会换行的前提下,显示更多的内容,也就是第二个

    subtitle 2 subtitle 2中第一个单词和第一个数字会到同一行,且第一个li撑开的宽度不足以让第二个单词也到同一行。

    父元素去掉relative 子元素absolute
    在这个例子中,所有父元素都没有static之外的属性,该子元素会相对于浏览器窗口进行定位,最大宽度也就是浏览器的宽度,所以会完整的显示出整行内容,而不会换行。

    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程