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

显示结果如下:

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>

你应该设计 ul 里面 li 和 锂 里面 UL ,

View demo here . 希望能有所帮助。

快速查看CSS:

ul {
    list-style:none;   
    display:block;
    float: left;
    clear: both;
    width: 100%;
}
li {
    display: inline;
}
ul > li > ul {
    padding-left: 0;
}

您需要将样式应用到LIS内的ULS。试试这个

ul li    {
    float: left;        
}