float：left and float：right divs（block）does not fit on one line

Question

我想創建嵌套菜單。一些菜單項有我嘗試放置在同一行但與右側對齊的快捷鍵。 我試圖使用浮動左/右，但我有放置快捷方式的問題，他們轉移到下一行。我如何解決它？

你可以看到代碼在這裏：

.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/

Answer 1

請不要誤會我的意思，但你的問題聽起來像「我如何獲得兩英尺一個鞋，沒有它撕裂「。

1. 要麼你必須增加鞋子的尺寸。
2. 或者你需要減小腳的​​尺寸。

因此，在你的代碼的條款，要麼你必須設置div容器.menu-item-container謹慎的大小（特別，因爲孩子們都漂浮），或者你需要設置爲「長一個最大寬度文本擰緊了快捷鍵「」，以便不用推其他元素，而是自己切換到新行。

Answer 2

可以使用flexbox，而不是像floating下面的代碼：

1. 添加display:flex父。
2. 加margin-left: auto至.menu-item-shortcut
3. 刪除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

Can I use flexbox

Answer 3

.menu-item-container { 
    width: 200px; 
} 
.menu-item-label { 
    float:left; 
    position: relative; 
    width: 105px; 
    display: block; 
    overflow: hidden; 
} 

更新您的https://jsfiddle.net/meqe4318/14/

Answer 4

嘗試像這款U給代碼： - <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;"> 

changed Jsfiddle

Answer 5

的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; 
} 

這樣你可以保留整個文本。

Answer 6

<div class="nav-container"> 
<ul class="nav-main"> 
<li><a href="#">nav 1<span class="arrow">&nbsp;</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>