2

我有一段 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-widthand max-widthfor设置了这个.menu。但是由于某种原因，即使 中的内容<li>小于max-width，菜单的宽度也被限制为min-width。

有人能告诉我为什么会这样吗？

4

1 回答 1

4

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

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

您需要做的是从锚点中删除位置：相对，添加另一个“不可见”容器并设置其相对位置，然后您的 UL 可以扩展到该元素的大小限制。看到这个小提琴的固定版本

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

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

更新：

请参阅将包装器移到桌子外的小提琴

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

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

对于你们之间的语义：

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

于 2012-04-15T06:51:23.733 回答