我想要创建嵌套菜单。有些菜单项有快捷键,我试着把它们放在同一行,但向右对齐。我试着用左/右浮动,但我在放置快捷方式时遇到了问题,它们移到了下一行。我该如何解决它?
你可以在这里看到代码:
.menu-item-container {}
.vert-menu {
position: absolute;
min-width: 180px;
border: #aaa 1px solid;
background: white;
}
.menu-item-vert {
float: none;
}
.menu-item {
font: 13px Arial, sans-serif;
height:13px;
color: black;
padding: 3px 7px 5px 7px;
white-space: nowrap;
position: relative;
background: white;
}
.menu-item-shortcut {
float: right;
padding: 0px 0px 0px 24px;
position: relative;
color: #777;
left: auto;
right: 5px;
direction: ltr;
text-align: right;
}
.menu-item-label {
float:left;
position: relative;
}
<div class="menu-item-container vert-menu" style="top: 22px; display: inline;">
<div class="menu-item menu-item-vert">
<span class="menu-item-label">New...</span>
<span class="menu-item-shortcut">Ctr+N</span>
</div>
<div class="menu-item menu-item-vert">
<div class="menu-item-container vert-menu" style="top: 0px; display: inline; left: 180px;">
<div class="menu-item menu-item-vert">
<span class="menu-item-label">File</span>
<span class="menu-item-shortcut">Alt+ F</span>
</div>
<div class="menu-item menu-item-vert">
<span class="menu-item-label">Long text that screws up the shortcut</span>
<span class="menu-item-shortcut">Shift+Del</span>
</div>
</div>
<span class="menu-item-label">Add</span>
<span class="menu-item-shortcut">▶</span>
</div>
</div>
https://jsfiddle.net/meqe4318/8/
您可以使用flexbox
而不是floating
,如下代码所示:
- 将
display:flex
添加到父级 - 将
margin-left: auto
添加到.menu-item-shortcut
- 从子级中删除
float
属性
.menu-item-container {}
.vert-menu {
position: absolute;
min-width: 180px;
border: #aaa 1px solid;
background: white;
}
.menu-item-vert {
float: none;
display:flex;
}
.menu-item {
font: 13px Arial, sans-serif;
height:13px;
color: black;
padding: 3px 7px 5px 7px;
white-space: nowrap;
position: relative;
background: white;
}
.menu-item-shortcut {
/*float: right;*/
padding: 0px 0px 0px 24px;
position: relative;
color: #777;
left: auto;
right: 5px;
direction: ltr;
text-align: right;
margin-left: auto;
}
.menu-item-label {
/*float:left;*/
position: relative;
}
<div class="menu-item-container vert-menu" style="top: 22px; display: inline;">
<div class="menu-item menu-item-vert">
<span class="menu-item-label">New...</span>
<span class="menu-item-shortcut">Ctr+N</span>
</div>
<div class="menu-item menu-item-vert">
<div class="menu-item-container vert-menu" style="top: 0px; display: inline; left: 180px;">
<div class="menu-item menu-item-vert">
<span class="menu-item-label">File</span>
<span class="menu-item-shortcut">Alt+ F</span>
</div>
<div class="menu-item menu-item-vert">
<span class="menu-item-label">Long text that screws up the shortcut</span>
<span class="menu-item-shortcut">Shift+Del</span>
</div>
</div>
<span class="menu-item-label">Add</span>
<span class="menu-item-shortcut">▶</span>
</div>
</div>
参考答案:https://stackoverflow.com/a/22429853/863110
我可以使用flexbox
吗
解决方案1-文本溢出
如果你想保持浮动,请选择更大的宽度和/或给标签一个最大宽度(在你的情况下是88px(和文本溢出:
.menu-item-label {
..
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 88px;
}
.menu-item-container {}
.vert-menu {
position: absolute;
min-width: 180px;
border: #aaa 1px solid;
background: white;
}
.menu-item-vert {
float: none;
}
.menu-item {
font: 13px Arial, sans-serif;
height:13px;
color: black;
padding: 3px 7px 5px 7px;
white-space: nowrap;
position: relative;
background: white;
}
.menu-item-shortcut {
float: right;
padding: 0px 0px 0px 24px;
position: relative;
color: #777;
left: auto;
right: 5px;
direction: ltr;
text-align: right;
}
.menu-item-label {
float:left;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 88px;
}
<div class="menu-item-container vert-menu" style="top: 22px; display: inline;">
<div class="menu-item menu-item-vert">
<span class="menu-item-label">New...</span>
<span class="menu-item-shortcut">Ctr+N</span>
</div>
<div class="menu-item menu-item-vert">
<div class="menu-item-container vert-menu" style="top: 0px; display: inline; left: 180px;">
<div class="menu-item menu-item-vert">
<span class="menu-item-label">File</span>
<span class="menu-item-shortcut">Alt+ F</span>
</div>
<div class="menu-item menu-item-vert">
<span class="menu-item-label" title="Long text that screws up the shortcut">Long text that screws up the shortcut</span>
<span class="menu-item-shortcut">Shift+Del</span>
</div>
</div>
<span class="menu-item-label">Add</span>
<span class="menu-item-shortcut">▶</span>
</div>
</div>
解决方案2-有利润
如果你知道快捷方式跨度的最大宽度,你可以将这个值分配给标签的边距,并将快捷方式的位置更改为绝对:
.menu-item-shortcut {
..
position: absolute;
}
.menu-item-label {
..
margin-right: 70px;
}
这样你就可以保留整个文本。
请不要误解我的意思,但你的问题听起来像是"我如何在一只鞋里两只脚不撕裂"。
- 要么你得加大鞋的尺寸
- 或者你需要缩小脚的尺寸
因此,就您的代码而言,您必须谨慎地设置容器div .menu-item-container
的大小(,特别是因为子级是浮动的(,或者您需要为"破坏快捷方式的长文本"设置最大宽度,这样它本身就切换到新行,而不是向下推其他元素。
.menu-item-container {
width: 200px;
}
.menu-item-label {
float:left;
position: relative;
width: 105px;
display: block;
overflow: hidden;
}
更新了您的https://jsfiddle.net/meqe4318/14/
试试这个,你已经给出了类似的代码:-<div class="menu-item-container vert-menu" style="top: 0px; display: inline; left: 180px;">
请更改顶部样式:-
<div class="menu-item-container vert-menu" style="top: -22px; display: inline; left: 180px;">
更改Jsfidle
<div class="nav-container">
<ul class="nav-main">
<li><a href="#">nav 1<span class="arrow"> </span></a>
<ul class="child">
<li><a href="#">nav child 1</a>
</li>
</ul>
</li>
</ul>
</div>
<style type="text/css">
body {height:100%; margin:0; padding:0;}
a {color:#ffffff; display:block; padding:5px 10px; text-decoration:none;}
img {max-width:100%;}
.nav-container {padding:15px;}
.nav-main {display:block; list-style:none; margin:0; padding:0;}
.nav-main > li {background:#000000; position:relative; width:200px;}
.nav-main > li:hover ul.child {display:block;}
span.arrow {background-image:url("http://www.iconsdb.com/icons/preview/gray/arrow-37-xxl.png"); background-position:right center; background-repeat:no-repeat; background-size:100% auto; height:14px; position:absolute; right:2px; top:8px; width:14px; z-index:9;}
ul.child {left:100%; margin:0; padding:0; position:absolute; top:0; width:200px; display:none;}
.child > li {background:#ff0000;}
</style>