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

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 ，添加另一个"不可见"容器并设置其位置相对，然后您的 UL 可以扩展到该元素的大小限制。 请参阅此小提琴以获取固定版本

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

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

更新：

看到小提琴与包装纸移到桌子外面

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

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

对于你们中间的语义：

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