部门边界不受尊重

尽可能简洁明了。我有一个divsion，“盒子”，固定宽度为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: 111 111 1111 
    <ul class="nav"> 
     <li>Testimonials</li> 
     <li>About</li> 
     <li>Fees</li> 
    </ul> 
</div>

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

来源

2013-03-03 Blind Fish

http://jsfiddle.net/5UKqp/这是你的代码。我对你在问什么感到困惑。 – 2013-03-03 22:59:08

您也应该漂浮容器（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，与您的代码的缩小（和工作）的版本。

来源

2013-03-03 23:00:22 kapa

这当然指向了正确的方向。虽然你发布的代码在jsFiddle上工作，但是当我以这种方式编辑我的代码时，它没有任何效果。但是，当我添加的边距：0;到了ul.nav li {}，它将所有事情都带回了正确的路线。我仍然无法让#pinkbar上的右侧填充正常工作，但我通过缩短整个分区的宽度来补偿。 – 2013-03-04 00:45:42

部门边界不受尊重

回答

相关问题