延长父母的位置：绝对孩子到孩子的宽度

在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

延长父母的位置：绝对孩子到孩子的宽度

回答

相关问题