Question

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

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

如果您查看“产品菜单”，您会看到我有两组链接（以漂亮的粉红色线条勾勒出来），这两个链接堆叠在另一个上面。我希望这些链接彼此并排浮动（使子菜单更加简洁）。我觉得inline-block（参见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;*/ }

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

有解决方法吗？

提前致谢！

Answer 1

这是您需要添加的全部内容：

.subMenu{
    white-space:nowrap;
}

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

获取UL随内容增长（内联阻止列表项）

1 个答案: