我想创建嵌套菜单。一些菜单项有快捷键,我尝试将它们放在同一行但与右侧对齐。 我尝试为此使用 float 左/右,但我在放置快捷方式时遇到问题,他们转移到下一行。我该如何解决?
你可以在这里看到代码:
.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>
最佳答案
您可以使用 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>
关于html - float : left and float: right divs(block) doesn't fit on one line,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38120286/