代码之家 › 专栏 › 技术社区 › Georg Schölly Crazy Developer

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

css html

Georg Schölly Crazy Developer · 技术社区 · 15 年前

这里是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;
}

3 回复 | 直到 13 年前

Fenton 15 年前

显示结果如下:

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>

Georg Schölly Crazy Developer 15 年前

你应该设计 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;
}