Navbar Dropdown nicht richtig angezeigt

Ich möchte das Dropdown auf meiner Navbar breit genug sein, dass der Text in es richtig angezeigt wird, aber es ist auf die Größe der Schaltfläche beschränkt, über die Sie den Mauszeiger bewegen, um es zu aktivieren. Ich möchte, dass das Dropdown eine größere Breite als der Button hat.Navbar Dropdown nicht richtig angezeigt

Der Titel wird im Browser gut angezeigt, also nicht sicher, warum er in der Geige falsch ausgerichtet ist.

#center-title { 
 
    width: 200px; 
 
    font-size: 30px; 
 
    color: white; 
 
    position: fixed; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    text-align: center; 
 
} 
 
#cog { 
 
    width: 20px; 
 
    height: 20px; 
 
    margin-right: 50px; 
 
    margin-top: 15px; 
 
} 
 
#dropdown { 
 
    float: right; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
#dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0#2); 
 
} 
 
#dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 
#dropdown-content a:hover { 
 
    background-color: #f1f1f1 
 
} 
 
#dropdown:hover #dropdown-content { 
 
    display: block; 
 
} 
 
nav { 
 
    background-color: #2b569a; 
 
    width: 100%; 
 
    height: 50px; 
 
    margin-top: 0; 
 
}

<nav> 
 
    <div class="center"> 
 
    <h1 id="center-title"> Blocs </h1> 
 
    </div> 
 
    <div id="dropdown"> 
 
    <img id="cog" src="/static/images/cog2.png" alt="" /> 
 
    <div id="dropdown-content"> 
 
     <a href="profile.html"> Profile </a> 
 
     <a href="settings.html"> Settings </a> 
 
     <a href="logs.html"> Logs </a> 
 
     <a href="emails.html"> Email list </a> 
 
    </div> 
 
    </div> 
 
</nav>

Quelle

2016-11-16 Shadowsista

Sie haben keine CSS für Ihre 'center' Klasse? –

@BviLLe_Kid Angesichts der Beschreibung des Problems, würde ich mir keine Sorgen über die fehlende Klasse ".center" machen. Es ist interessanter, dass der JSFiddle- und der eingefügte Code nicht identisch sind. – hungerstar

@hungerstar Wo siehst du, dass sie nicht gleich sind? –

right: 0; zu #dropdown-content hinzufügen.

#center-title { 
 
    width: 200px; 
 
    font-size: 30px; 
 
    color: white; 
 
    position: fixed; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    text-align: center; 
 
} 
 
#cog { 
 
    width: 20px; 
 
    height: 20px; 
 
    margin-right: 50px; 
 
    margin-top: 15px; 
 
} 
 
#dropdown { 
 
    float: right; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
#dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    right: 0; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0#2); 
 
} 
 
#dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 
#dropdown-content a:hover { 
 
    background-color: #f1f1f1 
 
} 
 
#dropdown:hover #dropdown-content { 
 
    display: block; 
 
} 
 
nav { 
 
    background-color: #2b569a; 
 
    width: 100%; 
 
    height: 50px; 
 
    margin-top: 0; 
 
}

<nav> 
 
    <div class="center"> 
 
    <h1 id="center-title"> Blocs </h1> 
 
    </div> 
 
    <div id="dropdown"> 
 
    <img id="cog" src="/static/images/cog2.png" alt="" /> 
 
    <div id="dropdown-content"> 
 
     <a href="profile.html"> Profile </a> 
 
     <a href="settings.html"> Settings </a> 
 
     <a href="logs.html"> Logs </a> 
 
     <a href="emails.html"> Email list </a> 
 
    </div> 
 
    </div> 
 
</nav>

Quelle

2016-11-16 21:12:53 hungerstar

Sie Anzeige verwenden können: flex, anstatt Float und Anzeige mit: inline-block für Layouts.

Überprüfung dieser Ausschnitt

. #center-title { 
 
    width: 200px; 
 
    font-size: 30px; 
 
    color: white; 
 
    position: fixed; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    text-align: center; 
 
} 
 
#cog { 
 
    width: 20px; 
 
    height: 20px; 
 
    margin-right: 50px; 
 
    margin-top: 15px; 
 
} 
 
.center { 
 
    margin: auto; 
 
} 
 
#dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    right: 20px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0#2); 
 
} 
 
#dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 
#dropdown-content a:hover { 
 
    background-color: #f1f1f1 
 
} 
 
#dropdown:hover #dropdown-content { 
 
    display: block; 
 
} 
 
nav { 
 
    background-color: #2b569a; 
 
    width: 100%; 
 
    height: 50px; 
 
    margin-top: 0; 
 
    display: flex; 
 
    justify-content: flex-end; 
 
    align-content: center; 
 
}

<nav> 
 
    <div class="center"> 
 
    <h1 id="center-title"> Blocs </h1> 
 
    </div> 
 
    <div id="dropdown"> 
 
    <img id="cog" src="/static/images/cog2.png" alt="" /> 
 
    <div id="dropdown-content"> 
 
     <a href="profile.html"> Profile </a> 
 
     <a href="settings.html"> Settings </a> 
 
     <a href="logs.html"> Logs </a> 
 
     <a href="emails.html"> Email list </a> 
 
    </div> 
 
    </div> 
 
</nav> 
 
</div>

Hoffe, es hilft

Quelle

2016-11-16 21:20:21 Geeky

Navbar Dropdown nicht richtig angezeigt

Antwort

Verwandte Themen