1

尽可能简洁明了。我有一个分区，“盒子”，固定宽度为 1200 像素，用于包含其他几个分区。其中一个分区是链接栏，“粉色栏”，宽度为 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: 111 111 1111
   <ul class="nav">
        <li>Testimonials</li>
        <li>About</li>
        <li>Fees</li>
    </ul>
</div>

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

4

1 回答 1

1

您也应该浮动容器 ( 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 */
}

我创建了一个小 jsFiddle，其中包含您的代码的缩小（和工作）版本。

于 2013-03-03T23:00:22.440 回答