Drop-Down-Breite zu machen anpassen, um seinen Inhalt

Ich habe folgende CSS und HTML:Drop-Down-Breite zu machen anpassen, um seinen Inhalt

.dropbtn { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 

 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    right: 0; 
 
    background-color: #f9f9f9; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    z-index: 1; 
 
} 
 

 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    width: auto; 
 
} 
 

 
.dropdown-content a:hover { 
 
    background-color: #f1f1f1 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: inline-block; 
 
} 
 

 
.dropdown:hover .dropbtn { 
 
    background-color: #3e8e41; 
 
}

<body> 
 
    <div class="dropdown" style="float:left;"> 
 
    <button class="dropbtn">Left</button> 
 
    <div class="dropdown-content" style="left:0;"> 
 
     <a href="#">Make this phrase appear on one line.</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
    </div> 
 
    </div> 
 

 
</body>

ich die Menüpunkte in der Dropdown-Liste erscheinen auf Linie alle wollen - egal wie lange sie sind. Leute sagen display: inline-block macht dies möglich. Und immer noch kein Erfolg. Könnten Sie bitte einen Hinweis geben?

Quelle

2017-03-19 Edgar Navasardyan

Wie wäre es ein zu machen erweitern gut altmodisch white-space: nowrap;?

.dropbtn { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 

 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    position: absolute; 
 
    left: 0; 
 
    display: none; 
 
    background-color: #f9f9f9; 
 
    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; 
 
    white-space: nowrap; 
 
} 
 

 
.dropdown-content a:hover { 
 
    background-color: #f1f1f1 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: inline-block; 
 
} 
 

 
.dropdown:hover .dropbtn { 
 
    background-color: #3e8e41; 
 
}

<body> 
 
    <div class="dropdown" style="float:left;"> 
 
    <button class="dropbtn">Left</button> 
 
    <div class="dropdown-content" style="left:0;"> 
 
     <a href="#">Make this phrase appear on one line.</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
    </div> 
 
    </div> 
 

 
</body>

Quelle

2017-03-19 09:52:04 Boldewyn

Ihr Dropdown-Container ist nicht groß genug für so große Inhalte. erhöhen also die Breite des Behälters von 160px zu 300px:

.dropdown-content { 
min-width: 300px; 
}

Dies wird das Problem lösen.

Dank

Quelle

2017-03-19 09:43:27

ich die Frage aktualisiert haben (min-wdith entfernt). Eigentlich möchte ich nicht die primitive Lösung verwenden, die Breite explizit einzustellen. Ich möchte es automatisch anpassen. Und 'width: auto' hilft auch nicht, BTW –

hinzufügen width:100%; zu .dropdown und entfernen right:0; von .dropdown-Gehalt es nach Drop-Down-div

.dropbtn { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 

 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    z-index: 1; 
 
    top: 100%; 
 
} 
 

 
.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: inline-block; 
 
} 
 

 
.dropdown:hover .dropbtn { 
 
    background-color: #3e8e41; 
 
}

<body> 
 
    <div class="dropdown" style="float:left;"> 
 
    <button class="dropbtn">Left</button> 
 
    <div class="dropdown-content" style="left:0;"> 
 
     <a href="#">Make this phrase appear on one line.</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
    </div> 
 
    </div> 
 

 
</body>

Quelle

2017-03-19 09:46:28 Chiller

Drop-Down-Breite zu machen anpassen, um seinen Inhalt

Antwort

Verwandte Themen