CSS,包含多行的内联列表

时间:2009-12-17 19:24:57

标签: css 960.gs

我的标题设置如下:

    <div id="header">
    <div class="container_16">


    <div class="grid_4"><img src="content/images/logo-beta.png" /></div>

    <div class="grid_5 push_1">
    <ul id="navigation">
        <li><a class="header-link" href="#">About</a><span class="sub-navigation"><a class="sub-link" href="#">Info</a><a class="sub-link" href="#">Terms</a></span></li>
        <li><a class="header-link" href="#">Account</a><span class="sub-navigation"><a class="sub-link" href="#">Sign In</a><a class="sub-link" href="#">Sign Up</a></span></li>
        </ul>
    </div>

    <div class="grid_7 push_3">Search</div>


</div>
</div>

我使用960 GS作为总体布局。我想做的是让我的导航看起来像是分层的。

About               Account
Info, Terms         Sign In, Sign Up

其中关于和帐户是粗体(这很容易),但我希望子项的范围低于标题导航项,并且LI的内嵌如上所示。一旦我附加display:block to the span,即使LI有显示:内嵌在它们上面,它们也会相互叠加。

这是我到目前为止我的CSS。

#navigation
{
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#navigation li
{
    color: #f7f3e7;
    display: inline;
}

#navigation li span.sub-navigation
{
    display:block;
}

#navigation li a 
{ 
    color: #f7f3e7;
    text-decoration: none; 
}

.header-link
{
    font-weight: bold;
}

2 个答案:

答案 0 :(得分:2)

不要让你的子列表跨越..也可以列出它们!

<ul class="main-list">
   <li class="main-list-title">Title!
     <ul class="sub-list">
       <li>Something</li>
       <li>Something</li>
       <li>Something</li>
     </ul>
   </li>
 </ul>

为了扩展我的答案,你应该能够做一些CSS魔法,你可以使你的等级1 li和等级2 li按你想要的方式排列,也许浮动你的l1 { {1}}离开并使你的l2 li s li

答案 1 :(得分:1)

虽然Jason所说的更具语义性,但你的CSS几乎就在那里,你在正确的地方错过了float:left

这是您的代码版本(适用于Firefox)http://jsbin.com/adede3

要修改该代码,请转到http://jsbin.com/adede3/edit