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

Question

我在做一个有二级菜单的导航条，结果见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时，效果如下图：

但当我去掉positon: relative时，效果却是这样：

我想知道是什么原因导致了第一种情况下二级菜单的内容自动换行而第二种情况下却没有自动换行。

Answer 1

父元素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也会填满宽度，在连续英文字母不会换行的前提下，显示更多的内容，也就是第二个<li><a>subtitle 2 subtitle 2</a></li>中第一个单词和第一个数字会到同一行，且第一个li撑开的宽度不足以让第二个单词也到同一行。

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

Answer 2

一楼答案说到了宽度不够换行造成的，二楼是说position: relative之后改变了li的父元素，按照一楼的方法，也就把视窗大小当成了父元素，自然宽度就够了。

今天我遇到了类似的问题：父元素positive，子元素absolute,如果子元素的left值大于了父元素与子元素的宽度差值，那么子元素内容会换行。其实让子元素不换行也是可以解决的（white-space: nowrap）

Answer 3

根本原因是.nav ul这个元素的包含块变了，其自身宽度计算和包含块的宽度息息相关。

当.nav > li 添加positon: relative时，.nav ul元素的包含块是.nav > li；
当.nav > li 去掉positon: relative时，.nav ul元素的包含块是初始包含块(视窗大小)。