html - 文档流中的水平列表 : how to set background color/border for just a few contiguous elements?

Question

假设我有一些如下所示的 HTML:

<ul class="top-list">
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li class="list-li">
        <ul class="inner-list">
            <li>I'm</li>
            <li>a</li>
            <li>sublist</li>
        </ul>
    </li>
    <li>four</li>
    <li>five</li>
</ul>

我希望最终结果大致如下所示:

换句话说，我希望嵌套列表与更高级别的列表具有完全相同的流程，但具有彩色背景。不幸的是，到目前为止我的 CSS 实验都是徒劳的。 flexbox 和 float 都无法处理分解子列表，使子列表inline 会使父列表折叠，导致紫色背景压缩下降到高度 0。

这里有一些非常接近的 CSS，但是为了解决 inline 布局问题而不得不指定奇怪的像素大小是我希望避免的事情。另外，如果您将页面缩小到所有三个橙色框都在自己的行上，第一行仍然有一条紫色背景。我也需要避免这种情况。

ul.inner-list {
    display: inline;
    background-color: purple;
    padding: 15px 0px 15px 3px;
    position: relative;
    bottom: 1px;
li.list-li {
    display: inline;
    border: none;
    background-color: transparent;
}
ul.inner-list li {
    background-color: orange;
}
li {
    display: inline-block;
    background-color: lightblue;
    border: solid;
    margin: 2px;
    padding: 2px;
    width: 100px;
    height: 30px;
    text-align: center;
    vertical-align: middle;
}

令人沮丧的是，拥有一个非嵌套列表并简单地用 ul 中的 div 围绕相关元素似乎可以完美地达到相同的效果——但它是反对规范!

换句话说，这在概念上与我想做的非常接近，但它是非法的:

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <div>
        <li>I'm</li>
        <li>a</li>
        <li>sublist</li>
    </div>
    <li>four</li>
    <li>five</li>
</ul>

我应该怎么做？

Answer 1

这就是我所做的。希望您不必支持旧版本的 IE，因为我相信 7 不支持 inline-block。

jsfiddle:http://jsfiddle.net/jdczybvt/

HTML 是一样的:

<ul class="top-list">
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li class="list-li">
        <ul class="inner-list">
            <li>I'm</li>
            <li>a</li>
            <li>sublist</li>
        </ul>
    </li>
    <li>four</li>
    <li>five</li>
</ul>

CSS:我认为我添加的只是外部 ul 的 display。

ul.top-list{
   display:inline-block;
}

ul.inner-list {
    display: inline;
    background-color: purple;
    padding: 15px 0px 15px 3px;
    /*position: relative;*/
    bottom: 1px;
}
li.list-li {
    display: inline;
    border: none;
    background-color: transparent;
}
ul.inner-list li {
    background-color: orange;
}
li {
    display: inline-block;
    background-color: lightblue;
    border: solid;
    margin: 2px;
    padding: 2px;
    width: 100px;
    height: 30px;
    text-align: center;
    vertical-align: middle;
        display:inline-block;
}