html - 扩展位置 :absolute child to child's width 的父级

Question

关于 http://jsfiddle.net/q8eDF/我正在尝试设置菜单样式，但它还不是很完美。

如何让 .dropdown-container 的红色边框扩展到绿色区域(即整个菜单)，.dropdown-header 的蓝色边框扩展到 .dropdown-item 的右边框(或者， .dropdown-item 扩展到 .dropdown-header 的边界，以防标题比最宽的元素宽)，同时在 .dropdown-header 和 .dropdown-arrow 的最后一个字符之间留出 ~10px 的空间？

BC我不管，只要现在的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;
}

Answer 1

如果导航栏是您想要的，我建议将整个导航栏包装在绝对定位的容器中，以便它可以 float 在其他内容之上:

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