使用jQuery调整<ul>的宽度以适应菜单项

Question

这是我一段时间前发布的问题的扩展：调整<ul>宽度以适应菜单项

有没有jQuery代码片段可以调整特定<ul>内每个<ul>的宽度，以确保<li>项目不会溢出？ 菜单看起来像这样：

<ul id="menu">
  <li>
    <a href="javascript:;">Menu 1</a>
    <ul>
      <li><a href="javascript:;">Item 1<a></li>
      <li>
        <a href="javascript:;">Subitem 1</a>
        <ul>
          <li><a href="javascript:;">Subsubitem 1</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

如果我没有正确调整<ul>，布局看起来会像这样一样混乱： 如果您需要了解有关CSS或Web页面的一般结构的更多信息，请在此处查看我正在开发的网站。 这里

- Pieter

Answer 1

实际上，宽度问题源于此处设置的顶层宽度：

ul#menu > li {
  display: block;
  float: left;
  background: url(img/menuitem.png) top left;
  width: 104px;                                 /* here's the issue */
  height: 36px;
  margin-right: 1px;
  text-align: center;
  position: relative;                           /* add this */
}

由于已经指定了 width，并且其子元素处于正常流中，因此其子元素服从于它的宽度，而不是自己缩放。您可以通过将子元素移出流，例如在上面的样式中添加 position: relative;，然后为子元素的 <ul> 添加 position: absolute 来解决这个问题：

ul#menu > li ul {
  position: absolute;
  top: 36px;              /* top <li> is 36px, go down that much */
}

最后，为了让锚文本有完整的背景，需要给它加上一个 white-space 规则，像这样：

ul#menu > li > a, ul#menu > li > ul a {
  display: block;
  text-decoration: none;
  white-space: nowrap;
}

这是结果的样子：

- Nick Craver

---

伟大的解决方案，无需涉及Javascript。 - hitautodestruct

@hitautodestruct 这个解决方案在IE6下有几个bug。 - James

@Pieter - 你能给我发一个修改后的CSS链接让我看看吗？我在问题链接中仍然看到原始的CSS。 - Nick Craver

@hitautodestruct Chrome忽略了某些CSS代码，如那三个被划掉的CSS声明所示。受影响的声明是display: block; text-decoration: none; white-space: nowrap;。 - Pieter

哎呀，那真是太有道理了。天啊，我在编辑CSS时必须保持专注。但是，谢谢你解决我的问题！赏金归你了。 - Pieter

Answer 2

这就是你需要做的（并且间距应该与你的主题一致）：

ul#menu > li > ul {
  position: absolute;
  top: 37px;
}

- jackocnr

---

这不是唯一的问题，它会把元素放在页面顶部，但我已经在我的答案中完全解决了这个问题 :) - Nick Craver

Answer 3

如果您从以下代码中删除line-height属性：

ul#menu > li > ul li {
  color:black;
  font-size:10pt;
   /*line-height:30px;*/
  text-align:left;
}

如果将line-height设置为较小的值，如20px，则可以正常显示。

- Sarfraz

---

我希望所有菜单项的高度都相同，所以恐怕这对我来说不是一个选项。 - Pieter

但是当高度固定时（这正是我想要的），文本可能会溢出。我希望宽度能够自动调整以适应单行文本，而高度应保持不变。 - Pieter

尝试设置 width: auto; 并指定固定高度； - tomsseisums

width: auto 似乎无法改变这种情况。这并不能防止文本溢出到新行，而不是将菜单调整大小以适应一行上的文本。@Sarfraz：如果我处理的文本需要超过200px的空间怎么办？ - Pieter

如果我记得我的CSS理论正确的话，这将使<li>的宽度相对于底层的<ul>。但这仍然不能确保菜单足够宽以适应每个菜单项在一行文本上。 - Pieter