于是就有了下面的布局:
我们关注“SERVICEUSER”按钮及其子菜单问题。
那么有没有办法让子菜单的最小宽度(绝对位置)与其父菜单相同。
我已经重现了这个情况 jsfiddle link .
所以基本上需要的是使 .collection min-width 与 li
的宽度相同。
这种情况的html结构是这样的:
<ul>
<li>
<a href="">SERVICEUSER</a>
<div class="collection">
<div class="item">Item-1</div>
<div class="item">Item-2</div>
<div class="item">Item-3</div>
</div>
</li>
</ul>
这种情况的css是这样的:
ul { list-style-type: none; }
li { display: inline; }
a { background: green; }
.collection {
position: absolute; // this is necessary for the situation
background: white;
}
最佳答案
用“absolute”定位的元素包含在其最近的相对父元素的流中。如果你使 li
成为相对的,你可以设置集合的宽度。
li { display: inline; position: relative; }
.collection {
position: absolute;
background: white;
min-width: 100%;
white-space: nowrap;
}
编辑:我添加了 white-space: nowrap
以允许集合(子项)大于主项。
关于html - 像容器一样定位绝对元素的宽度(在 css 中),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36347565/