Question

这是我刚刚发布的问题的扩展：Fitting a <ul>'s width to accommodate the menu items

是否有一段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>，布局看起来很乱，如下所示：

Site menu http://img838.imageshack.us/img838/1288/menu.jpg

如果您需要有关CSS或网页常规结构的更多信息，可以查看我正在开发的网站here。

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: realtive;，然后给孩子<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;
}

以下是结果： alt text http://img189.imageshack.us/img189/3817/menuye.jpg

Answer 2

这就是你需要做的所有事情（间距应与你的主题一致）：

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

Answer 3

如果您从

中删除line-height属性

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

显示正常或将line-height设置为较小的值，例如20px

调整<ul>的宽度以使用jQuery </ul>来容纳菜单项

3 个答案: