延長父母的位置：絕對孩子到孩子的寬度

在http://jsfiddle.net/q8eDF/我試圖找到一個菜單樣式，但它還不完美。延長父母的位置：絕對孩子到孩子的寬度

如何獲取.dropdown-container的紅色邊框也可以擴展爲綠色區域（即整個菜單），.dropdown-header的藍色邊框擴展到.dropdown-item的右邊框（或.dropdown-item擴展到.dropdown-header的邊框，以防頭標寬於最寬項目），同時在.dropdown-header和.dropdown-arrow的最後一個字符之間允許〜10px的空間。

我不在乎公元前，只要現在的FF和Chrome都可以運行它，我很好。

HTML：

<div id="dd" class="dropdown-container"> 
    <div class="dropdown-header">Feed options<span class="dropdown-arrow">v</span></div> 
    <div class="dropdown-items"> 
    <div class="dropdown-item">Reload</div> 
    <div class="dropdown-item">Unsubscribe</div> 
    <div class="dropdown-item">Reload from source</div> 
    </div> 
</div>

CSS：

.dropdown-container { 
display: inline-block; 
border: 1px solid red; 
position: relative; 
} 
.dropdown-items { 
display: block; 
position: absolute; 
z-index: 999; 
background: #fff; 
border: 1px solid green; 
} 
.dropdown-items { 
margin: 5px 0px; 
} 
.dropdown-item { 
margin: 3px 6px; 
cursor: pointer; 
} 
.dropdown-header { 
border: 1px solid blue; 
width: 100%; 
cursor: pointer; 
} 
.dropdown-arrow { 
position: absolute; 
right: 0; 
}

來源

2013-09-26 Skynet

你需要擺脫'的位置：在'.dropdown-items' absolute'。你使用絕對定位的任何特定原因？ – SlightlyCuban

是的，任何其他位置：弄亂其他菜單項。我在http://jsfiddle.net/ayh2d/ – Skynet

上舉了一個例子如何將整個導航欄包裝在絕對定位的容器中，然後填充「body」：http://jsfiddle.net/ayh2d/2/？（例子有點粗糙，但這個想法在那裏） – SlightlyCuban

如果導航欄是你以後，我建議包裝在absoltely定位的容器整個事情，因此它可以漂浮在其他內容：

HTML

<div class="navbar"> 
    <div id="dd" class="dropdown-container"> 
     <div class="dropdown-header"> 
      Feed options<span class="dropdown-arrow">v</span> 
     </div> 
     <div class="dropdown-items"> 
      <div class="dropdown-item">Reload</div> 
      <div class="dropdown-item">Unsubscribe</div> 
      <div class="dropdown-item">Reload from source</div> 
     </div> 
    </div> 
</div>

CSS

.navbar { 
    position: absolute; 
    top: 0px; 
} 
.navbar > div { 
    display: inline-block; 
    vertical-align: top; 
} 

body { 
    padding-top: 23px; 
} 

.dropdown-container { 
    display: inline-block; 
} 
.dropdown-header { 
    width: 100%; 
} 
.dropdown-arrow { 
    float: right; 
}

Fiddle

來源

2013-09-26 12:18:27 SlightlyCuban

延長父母的位置：絕對孩子到孩子的寬度

回答

相關問題