如何显示非嵌套的HTML列表？

Question

这是HTML

<ul>
    <li>Salads</li>
    <li>Fruits
        <ul>
            <li>Apples</li>
            <li>Prunes</li>
        </ul>
    </li>
    <li>Main Course</li>
</ul>

这是现在的样子:

Salads Fruits
   Apples Prunes
Main Course

这就是我希望它看起来像:

Salads Fruits Main Course
Apples Prunes

如何在不修改HTML的情况下实现这一目标？

目前的CSS:

ul {
    list-style:none;   
    display:block;
}
li {
    display:inline-block;
}

Answer 1

这导致显示:

Salads Fruits Main Course
      Apples Prunes

这是我使用的CSS.

ul {
    list-style:none;   
    display:block;
    float: left;
    clear: both;
    width: 100%;
}

li {
    display: inline;
}

如果您不希望单个水果在页面上开始一点点 - 使用此样式规则删除填充:

ul > li > ul {
    padding-left: 0;
}

如果您嵌套更多项目,上述所有内容仍然有效.例如:

<ul>
    <li>Salads
        <ul>
            <li>Green Leaf</li>
            <li>Chicken</li>
        </ul>
    </li>
    <li>Fruits
        <ul>
            <li>Apples</li>
            <li>Prunes</li>
        </ul>
    </li>
    <li>Main Course</li>
</ul>