float: links und float: rechts divs (block) passt nicht auf eine Zeile

Question

Ich möchte ein verschachteltes Menü erstellen. Einige Menüeinträge haben Tastenkürzel, die ich auf der gleichen Zeile platzieren möchte, aber auf der rechten Seite ausgerichtet bin. Ich habe versucht, Float links/rechts dafür zu verwenden, aber ich habe Probleme mit der Verknüpfung, sie verschoben auf die nächste Zeile. Wie kann ich es umgehen?

können Sie Code siehe hier:

.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

Bitte verstehen Sie mich nicht falsch, aber Ihre Frage klingt wie: „Wie bekomme ich zwei Füße in einem Schuh, ohne dass es auseinander reißt ".

1. Entweder müssen Sie die Größe des Schuhs erhöhen.
2. Oder Sie müssen die Größe der Füße reduzieren.

So in Bezug auf Ihren Code, müssen Sie entweder die Größe des div-Container setzen .menu-item-container diskret (speziell da die Kinder schwammen), oder Sie brauchen eine maximale Breite für die "Lang eingestellt Text, der die Abkürzung "verschraubt", so dass anstatt andere Elemente nach unten zu schieben, es selbst auf eine neue Zeile umschaltet.

Answer 2

können Sie flexbox anstelle von floating wie der Code unten:

1. display:flex In den übergeordneten.
2. hinzufügen margin-left: auto-.menu-item-shortcut
3. die float Eigenschaft von den Kindern entfernen.

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

Referenz Antwort: 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; 
} 

Ihre Aktualisiert https://jsfiddle.net/meqe4318/14/

Answer 4

Versuchen Sie, diese u gegeben Code wie haben: - <div class="menu-item-container vert-menu" style="top: 0px; display: inline; left: 180px;">

Pls Stil ändern für top: -

<div class="menu-item-container vert-menu" style="top: -22px; display: inline; left: 180px;"> 

changed Jsfiddle

Answer 5

LÖSUNG 1 - Mit Text-Überlauf

Wenn Sie Floats behalten möchten, wählen Sie eine größere Breite und/oder geben Sie den Beschriftungen eine maximale Breite (in Ihrem Fall 88px) und einen Textüberlauf:

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

SOLUTION 2 - Mit Marge

Wenn Sie wissen, was die max die Abkürzung Spannweite nehmen, können Sie diesen Wert auf Etikett des margen zuweisen rechts, und ändern Sie die Position der Abkürzung auf absolut:

.menu-item-shortcut { 
    .. 
    position: absolute; 
} 
.menu-item-label { 
    .. 
    margin-right: 70px; 
} 

Auf diese Weise können Sie den gesamten Text behalten.

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>