html - 在响应式网站设计中，如何将列表放在包含子列表而不与主列表重叠的其他列表下方

Question

我有带有子列表的列表，我需要当窗口屏幕缩小时，其他列表下方的列表不会与第一个子列表重叠。

HTML 标记 -

         <div class="row-fluid">
            <ul>    
               <li class="menulinks">.....</div>
                 <ul>
                     <li class="submenulinks"><div>.....</div></li>
                 </ul>
               </li>
            </ul>
        </div>

CSS -

.sitemap .menulinks{
    background-color:green;
    border-radius: 10px;
    margin-top: 20px;
    text-align:center;
    padding-top:10px;
    margin-left: 0px;
    margin-right:10px;
    color: #FFFFFF;
    height:35px;
    width:11%;
    float:left;
    min-width: 100px;
    display:block
}
submenulinks{
    margin-top: 20px;
    margin-right:10px;
    color: green;
}

小屏幕所需的输出：http: //i.imgur.com/7zB6261.jpg

现有：http: //i.imgur.com/kziYvSK.jpg

Answer 1

非常简单：删除 li.menulinks 的固定高度，添加一个“header”（高度为 35px 的绿色圆角矩形）div 作为 li 的第一个子元素，然后......你就设置好了！

看看这个小提琴：http: //jsfiddle.net/32pga/

<div class="sitemap">
    <div class="row-fluid">
        <ul>
            <li class="menulinks">
                <div class="menulinks-header"></div>
                <ul>
                    <li class="submenulinks">
                        <div>Test 1</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 2</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 3</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 4</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 5</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 9</div>
                    </li>
                </ul>
            </li>
            <li class="menulinks">
                <div class="menulinks-header"></div>
                <ul>
                    <li class="submenulinks">
                        <div>Test 1</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 2</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 3</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 4</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 5</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 6</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 7</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 8</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 9</div>
                    </li>
                </ul>
            </li>
            <li class="menulinks">
                <div class="menulinks-header"></div>
                <ul>
                    <li class="submenulinks">
                        <div>Test 1</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 2</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 3</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 4</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 5</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 6</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 7</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 8</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 9</div>
                    </li>
                </ul>
            </li>
            <li class="menulinks">
                <div class="menulinks-header"></div>
                <ul>
                    <li class="submenulinks">
                        <div>Test 1</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 2</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 3</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 4</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 5</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 6</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 7</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 8</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 9</div>
                    </li>
                </ul>
            </li>
            <li class="menulinks">
                <div class="menulinks-header"></div>
                <ul>
                    <li class="submenulinks">
                        <div>Test 1</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 2</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 3</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 4</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 5</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 6</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 7</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 8</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 9</div>
                    </li>
                </ul>
            </li>
            <li class="menulinks">
                <div class="menulinks-header"></div>
                <ul>
                    <li class="submenulinks">
                        <div>Test 1</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 2</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 3</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 4</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 5</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 6</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 7</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 8</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 9</div>
                    </li>
                </ul>
            </li>
            <li class="menulinks">
                <div class="menulinks-header"></div>
                <ul>
                    <li class="submenulinks">
                        <div>Test 1</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 2</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 3</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 4</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 5</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 6</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 7</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 8</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 9</div>
                    </li>
                </ul>
            </li>
            <li class="menulinks">
                <div class="menulinks-header"></div>
                <ul>
                    <li class="submenulinks">
                        <div>Test 1</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 2</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 3</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 4</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 5</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 6</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 7</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 8</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 9</div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

和 CSS ：

.sitemap .menulinks {
    margin-top: 20px;
    text-align:center;
    padding-top:10px;
    margin-left: 0px;
    margin-right:10px;
    color: #FFFFFF;
    width:11%;
    float:left;
    min-width: 100px;
    display:block;
}
.sitemap .menulinks-header {
    height:35px;
    background-color:green;
    border-radius: 10px;
}
.submenulinks {
    margin-top: 20px;
    margin-right:10px;
    color: green;
}

如果你给你的 li.menulinks 元素一个 35px 的固定高度，你就明确地告诉布局引擎，在绿色圆角矩形下方有渲染元素的空间 - 换句话说，在你的 li 顶部下方 35px。

请注意，您的 li 元素的子元素显示为溢出。您是否应该添加“溢出：隐藏；” 向您的 li.menulinks 声明，孩子们不会被渲染。

让布局引擎通过不给它们高度来自行计算 li 元素的高度。