当父级是相对时，绝对定位元素的宽度受到限制

Question

我有一段 CSS 实现了点击吸盘菜单。

标记：

<table>
<tr>
<td>
<div class="bodywrapper">
<a class="button" href="#">
   <ul class="menu">
      <li>test test test</li>
      <li>test test test test test test test test test test test test test test test</li>
   </ul>
</a>
</div>
</td>
</tr>
</table>

样式：

td{
   width: 80px;
}

.button{
  position: relative;
  display: inline-block;
  background-color: red;
  width: 10px;
  height: 27px;

}

.button:focus .menu, .button:active .menu{
  display: block;
}

.menu{
  display: none;
  position: absolute;
  min-width: 99px;
  max-width: 700px;
  width: auto;
  border: 1px black solid;
  margin-top: 27px;
}

---

更新，上面其实是包含在一个固定的表格单元格内

还有一个小提琴：http://jsfiddle.net/dAAXp/3/

问题：我希望在整个应用程序中都使用这种样式定义。因此，<li> 中的文本长度会有所不同。但是，我想要的行为是菜单具有最小和最大宽度。我已经使用min-width 和max-width 为.menu 设置了这个。但是由于某种原因，即使<li> 中的内容小于max-width，菜单的宽度也被限制为min-width。

谁能告诉我为什么会这样？

Answer 1

编辑：请参阅底部以获取问题更改的答案（解决方案完全相同）

原因是 A 是 UL 可以扩展到的第一个可定位（相对）块。因为锚点被限制为 10px，所以包含的 UL 只能根据该锚点框的尺寸进行填充。

您需要做的是从锚点中删除 position:relative，添加另一个“不可见”容器并将其位置设置为 relative，然后您的 UL 可以扩展到该元素的大小限制。见this fiddle for a fixed version

在“英语”中，这是你的 css 所说的：

UL：哦，好吧，所以我的宽度是第一个父级的 100%（因为你没有设置宽度）标记为相对...正确，所以我上方的 Anchor 被标记为相对，所以我的 100% 宽度是 10px...但是等待我的最小宽度是 99 像素，所以我会尊重这一点。

更新：

见fiddle with wrapper moved outside the table

逻辑与第一个完全相同 - 您可以在表格上设置相对位置，因为它是容器，只要其宽度为 100% 或大于您所需的包含子项的最小/最大宽度。

附带说明一下，一旦您到达不能使父宽度大于所需宽度的地步，您将不得不开始查看绝对定位并将元素从父元素中分离出来（但我现在将保留它）

为了你们之间的语义：

我已经添加了 div 包装器 - 您可以轻松将此行为应用于任何父级（即 table/tr/td，只要它比您需要的最小-最大宽度@phpdev 更宽，但如果您达到了这一点，则再次如果你的父母不够宽，那么你可能不得不打破语义