Question

尽可能简洁明了。我有一个divsion，“盒子”，固定宽度为1200px，我用来包含其他几个部分。其中一个部门是连杆，“粉红色条”，宽度为100％，高度为25px;。我试图添加一个无序列表，显示内联和右浮动，在这个“粉红色”部门。列表显示，向右浮动，但在分区下面的行上而不是在分区内。这个部门有足够的空间，完全没有理由需要换行。我试过修改各种参数，例如将“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>

同样，列表元素以内联方式显示，向右浮动，并具有边框。他们不在该部门的范围内。

Answer 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 */
}

我使用您的代码的缩小版（和工作版）创建了a little jsFiddle。

部门边界没有得到尊重

1 个答案: