Html 绝对定位固定宽度div中的Css水平菜单
我正在创建一个垂直于水平子菜单的导航菜单 Html:Html 绝对定位固定宽度div中的Css水平菜单,html,css,Html,Css,我正在创建一个垂直于水平子菜单的导航菜单 Html: <div id="sidenav"> <ul class="menu"> <li class="option"> <span class="label">Home</span> </li> <li class="option"> <span class="label">About</sp
<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>
两个菜单都处于绝对位置,子菜单需要位于父菜单选项的右侧
我在子菜单中的每个菜单选项中添加了一个左浮动,但它们保持垂直,不会变为水平。如何使子菜单水平
你可以在这把小提琴上看到结果:
演示
解释:非常简单
#sidenav>.menu>.option>.submenu>.menu>.option
上,
移除浮动:左侧代码>和应用显示:内联块代码>到它李>
在菜单上
应用空白:nowrap
以防止内联块
选项
换行到下一行
应用行高:50px
to。选项
s使文本垂直居中
因此:
“非常简单”-Awesome是更好的形容词。
我很喜欢这个问答,+1&多亏了这两个
list-style-type: none;
让我看看divs是否会给出同样的结果。是的
<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>
#侧导航
{位置:绝对;顶部:0;左侧:0;底部:0;宽度:100px;
背景:#ccc;轮廓:1px黑色虚线;}
/*使用列表*/
保险商实验室
{列表样式类型:无;填充:0;边距:0;}
保险商实验室
{空白:nowrap;}
锂
{宽度:100px;高度:50px;线条高度:50px;文本对齐:居中;}
.ulmenu>li
{位置:相对;背景:#fdd;}
.苏布勒菜单
{位置:绝对;顶部:0;左侧:100px;背景:#dfd;}
.subulmenu>li
{显示:内联块;背景:#ddf;}
/*使用div*/
.divmenu
{空白:nowrap;}
.div菜单>div、.subdiv菜单>div
{宽度:100px;高度:50px;线条高度:50px;文本对齐:居中;}
.div菜单>div
{位置:相对;背景:#fdd;}
.子菜单
{位置:绝对;顶部:0;左侧:100px;背景:#dfd;}
.subdivmenu>div
{显示:内联块;背景:#ddf;}
家庭2
大约2
更多2。。。
前2名
第二
第三次2
像这样吗@JoshCrozier是的,但在您的示例中,您指定了子菜单的宽度。我不能指定每个子菜单的宽度,因为它们可能都有不同数量的项目…这是我能想到的唯一选择--不需要宽度。@JoshCrozier似乎是一个使用位置固定的黑客。为什么会这样?太棒了!为什么菜单上的空格:nowrap和选项上的display:inline块组合在一起会阻止选项水平移动?@DamirBojan我对答案做了一些解释。@Arbel(多余?)我只是想让你知道我的答案。如果我在子菜单中有很多项呢?我想,如果下一个项目不在屏幕上,那么它将转到下一行。这是怎么回事?
list-style-type: none;
<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>