嘿,所以我有一个列表,其中一些项目包含其他列表。第一级列表需要内联,但是任何一个向下一级的列表都应该是普通的列表项。如果我给你看的话效果会更好。这就是我所拥有的:
但是,我希望主配置文件组事件和频率都在一条直线上,并且在它们下面有任何子列表。这里是CSS:

#box1, #box2, #box3 {
    background-color: #FC9;
    padding:10px;
    text-align:center;
}

#box1 li, #box2 li, #box3 li {
    display:inline;
    font-size:24px;
    list-style:none;
}
#box1 li ul, #box2 li ul, #box3 li ul {
    display:list-item;
    list-style:none;
}
#box1 li ul li {
    display:list-item;
    font-size:18px;
    list-style:none;
    border:none;
}
#box1 li ul li ul {
    display:list-item;
    list-style:none;
}
#box1 li ul li ul li {
    font-size:12px;
    list-style:none;
    border:none;
}

#box2 {
    background-color:#6F9;
}

#box3 {
    background-color:#C9F;
}

下面是HTML:
<div id="box1">
    <ul>
        <li>Home</li>
        <li>Profile
            <ul>
                <li>Edit Profile</li>
                <li>Inbox
                    <ul>
                        <li>New Message</li>
                        <li>Sent</li>
                    </ul>
                </li>
                <li>Photos</li>
                <li>Buddies</li>
            </ul>
        </li>
        <li>Groups
            <ul>
                <li>Create Group</li>
            </ul>
        </li>
        <li>Events
            <ul>
                <li>Plan Event</li>
            </ul>
        </li>
        <li>Frequencies</li>
    </ul>
</div>

<div id="box2">
    <ul>
        <li>Sitemap</li>
        <li>Help</li>
    </ul>
</div>

<div id="box3">
    <ul>
        <li>Private Policy</li>
        <li>Code of Conduct</li>
        <li>Terms of Use</li>
    </ul>
</div>

谢谢你的帮助。

最佳答案

尝试浮动最外面的lis:

#box1 li, #box2 li, #box3 li {
    display:inline;
    font-size:24px;
    list-style:none;
    float: left;       /* float the outer ones so they line up next to each other */
}
/* snip */
#box1 li ul li {
    display:list-item;
    font-size:18px;
    list-style:none;
    border:none;
    float: none;       /* don't float the inner ones */
}

您还需要将clear: both添加到#box2中才能使事情排好队。

09-12 06:31
查看更多