Question

我有一个CSS实现点击suckerfish菜单。

标记：

<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只能根据锚箱尺寸进行填充。

您需要做的是移除位置：相对于锚点，添加另一个“隐形”容器并设置其相对位置，然后您的UL可以扩展到该元素的大小限制。见this fiddle for a fixed version

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

UL：哦，好吧所以我的宽度是100％（因为你还没有设置宽度）的第一个父母用相对标记...正确所以我上方的锚标记为相对所以我的100％宽度是10px ...但是等我的最小宽度是99px所以我会尊重它。

更新：

请参阅fiddle with wrapper moved outside the table

逻辑与第一个逻辑完全相同 - 你可以在桌面上设置相对位置，因为它的容量足够长，因为它的宽度是100％或大于所包含的孩子所需的最小/最大宽度。

在旁注上，一旦你到达不能超过要求的父宽度的点，你将不得不开始寻找绝对定位并将元素从父母中分离出来（但我现在就离开）

对于你的语言：

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

当父亲是相对的时，绝对定位元素的宽度受到约束

1 个答案: