2

我有一个正在处理的 CSS 菜单,但是在不设置父 UL 的宽度的情况下无法让列表项向左浮动。

我已经设置了一个 JS 小提琴,所以你可以看看 http://jsfiddle.net/FkK7Y/1/

如果你看一下“产品菜单”,你会看到我有两组链接(用漂亮的粉红色线条勾勒出来),它们堆叠在一起。我希望这些链接集彼此并排浮动(使他的子菜单更加面板化)。我觉得内联块(见 li class="subMenu")应该在这里工作,但没有。

.mainMenu ul.subMenu li.subMenu {
  border:1px solid pink;
  display:inline-block;
  margin-right:10px;
 }

但是,如果我将宽度设置为父 UL(还有 class="subMenu" -我有一个当前在代码中注释掉的宽度参数,请随意摆弄以查看它的实际效果)内联块似乎可以工作在列表项上。

.mainMenu ul.subMenu {
  position:absolute;
  left:-9999px;
  top:34px;
  background:#fff;
  padding:0 0 10px 10px;
  z-index:-1;
  border:1px solid #600;
  min-width:100px;
  /*width:200px;*/ }

但是由于每个子菜单面板可能有一个或多个这些菜单,我不想指定宽度。我希望它随着我添加到它的列表项的数量而增长。

有没有解决的办法?

提前致谢!

4

1 回答 1

1

这就是您需要添加的所有内容:

.subMenu{
    white-space:nowrap;
}

更新:http: //jsfiddle.net/FkK7Y/2/

于 2013-04-05T18:54:03.797 回答