嘿,所以我有一个列表,其中一些项目包含其他列表。第一级列表需要内联,但是任何一个向下一级的列表都应该是普通的列表项。如果我给你看的话效果会更好。这就是我所拥有的:
但是,我希望主配置文件组事件和频率都在一条直线上,并且在它们下面有任何子列表。这里是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>
谢谢你的帮助。
最佳答案
尝试浮动最外面的li
s:
#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
中才能使事情排好队。