绝对定位的固定宽度div中的Css水平菜单答案

【问题标题】：Css horizontal menu in absolute positioned fixed width div绝对定位的固定宽度div中的Css水平菜单
【发布时间】：2014-05-04 00:47:01
【问题描述】：

我正在创建一个带有水平子菜单的垂直导航菜单。

HTML：

<div id="sidenav">
<ul class="menu">
    <li class="option">
        <span class="label">Home</span>
    </li>
    <li class="option">
        <span class="label">About</span>
    </li>
    <li class="option">
        <span class="label">More...</span>
        <div class="submenu">
            <ul class="menu">
                <li class="option">
                    <span class="label">First</span>
                </li>
                <li class="option">
                    <span class="label">Second</span>
                </li>
                <li class="option">
                    <span class="label">Thrid</span>
                </li>
            </ul>
        </div>
    </li>
</ul>
</div>

CSS：

#sidenav {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100px;
    color: #fff;
    background-color: #000;
}

.menu { 
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.option {
    width: 100px;
    height: 50px;
    text-align: center;
}

#sidenav > .menu > .option {
    position: relative;
}

#sidenav > .menu > .option > .submenu {
    position: absolute;
    top: 0;
    left: 100px;
    color: #fff;
    background-color: #ddd;
}

#sidenav > .menu > .option > .submenu > .menu > .option {
    float: left;
}

两个菜单都是绝对定位的，子菜单需要位于父菜单选项的右侧。

我在子菜单中的每个菜单选项左侧添加了一个浮动，但它们保持垂直并且不会水平。如何使子菜单水平？

你可以在这个 fiddle 中看到结果：

http://jsfiddle.net/vS9dY/1/

【问题讨论】：

喜欢这个？ jsfiddle.net/9yMxt
@JoshCrozier 是的，但在您的示例中，您为子菜单指定了宽度。我无法指定每个子菜单的宽度，因为它们可能都有不同数量的项目...
这是我能想到的唯一选择 - jsfiddle.net/5MXtb - 不需要宽度。
@JoshCrozier 似乎是使用固定位置的技巧。为什么这甚至行得通？

标签： html css

【解决方案1】：

演示 http://jsfiddle.net/vS9dY/7/

解释：很简单，

在#sidenav > .menu > .option > .submenu > .menu > .option, 删除 float:left; 并将 display:inline-block; 应用于它。
在.menu 上应用white-space:nowrap; 以防止inline-block .options 换行到下一行。
将line-height:50px; 应用到.options 以使文本垂直居中。

所以：

.menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
    white-space:nowrap;
}

.option {
    width: 100px;
    height: 50px;
    line-height:50px;
    text-align: center;
}

#sidenav > .menu > .option > .submenu > .menu > .option {
    display:inline-block;
}

【讨论】：

太棒了！为什么菜单上的 white-space: nowrap 和选项上的 display:inline-block 的组合会阻止选项水平？
@DamirBojan 我在答案中添加了一些解释，说明它是如何工作的。
@Arbel（多余的？）我只是想让你知道我的回答。
如果我在子菜单中有很多项目？我想，如果下一个项目不在屏幕上，那么它会转到下一行。这是怎么做的？ jsfiddle.net/9DfVF

【解决方案2】：

“非常简单” - Awesome 是更好的形容词。
我很喜欢这个问答，+1 并感谢两者。

list-style-type: none;

引导我看看 div 是否会给出相同的结果。他们有。

<html>
<head>
<style>
#sidenav    
  { position:absolute; top:0; left:0; bottom:0; width:100px; 
    background:#ccc; outline:1px dashed black; }
/* - - - - using lists - - - - */
ul  
  { list-style-type:none; padding:0; margin:0; }
ul
  { white-space:nowrap; }
li
  { width:100px; height:50px; line-height:50px; text-align:center; }
.ulmenu > li
  { position:relative; background:#fdd; }
.subulmenu      
  { position:absolute; top:0; left:100px; background:#dfd; }
.subulmenu > li
  { display:inline-block; background:#ddf; }
/* - - - - using divs - - - - */
.divmenu 
  { white-space:nowrap; }
.divmenu > div, .subdivmenu > div  
  { width:100px; height:50px; line-height:50px; text-align:center; }
.divmenu > div
  { position:relative; background:#fdd; }
.subdivmenu      
  { position:absolute; top:0; left:100px; background:#dfd; }
.subdivmenu > div
  { display:inline-block; background:#ddf; }
</style>
</head>
<body>
<div id="sidenav">
  <ul class="ulmenu"><!-- using lists -->
    <li>Home</li>
    <li>About</li>
    <li>More...
      <ul class="subulmenu">
        <li>First</li>
        <li>Second</li>
        <li>Thrid</li>
      </ul>
    </li>
  </ul>
  <div class="divmenu"><!-- using divs -->
    <div>Home2</div>
    <div>About2</div>
    <div>More2...
      <div class="subdivmenu">
        <div>First2</div>
        <div>Second2</div>
        <div>Thrid2</div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

【讨论】：