css - 师界不被尊重

尽可能简洁明了。我有一个分割框“ the box”，固定宽度为1200px，用于包含其他几个分割框。其中之一是链接栏，即“粉色栏”，其宽度为100％，高度为25px;。我试图在此“ pinkbar”分区中添加一个无序列表，以内联显示并向右浮动。列表显示，向右浮动，但显示在分区下方的行上，而不是位于分区内。该部门有足够的空间，而且绝对没有理由需要新的生产线。我尝试修改各种参数，例如将“ pinkbar”的宽度设置为1200px，但没有任何效果。有人可以解释为什么这些列表元素能够存在于被称为其的部门之外吗？

#thebox{
   padding-top: 0px;
   margin-top: 0px;
   margin-left: auto;
   margin-right: auto;
   width: 1200px;
   height: 250px;
}

#pinkbar{
   background-image: url(../visual/pinkMenuBar.jpg);
   background-repeat: no-repeat;
   padding-top: 3px;
   padding-left: 30px;
   padding-right: 10px;
   margin-top: 0px;
   margin-left: 0px;
   margin-right: 0px;
   width: 100%;
   height: 25px;
}

ul.nav{
    list-style-type: none;
}

ul.nav li{
   border-left-width: 2px;
   border-left-style: groove;
   border-left-color: grey;
   display: inline;
   float: right;
}

<div id="pinkbar" class="cambria3black">Tel: [phone]
   <ul class="nav">
        <li>Testimonials</li>
        <li>About</li>
        <li>Fees</li>
    </ul>
</div>

同样，列表元素以行内显示，向右浮动并带有边框。他们只是不在该部门的范围之内。

最佳答案

您也应该使容器（ul）浮动，因为它是一个块元素，所以它将尝试填充最大可能的空间宽度-从而落入下一行。

ul.nav {
    list-style-type: none;
    float: right; /* floats to the right, so will fit on the same line */
    margin: 0; /* gets rid of the default list margins */
}

我创建了a little jsFiddle，并缩小了代码的工作范围。