部門邊界不受尊重

儘可能簡潔明瞭。我有一個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

部門邊界不受尊重

回答

相關問題