Wie verschiebe ich diese Schaltfläche zusammen mit dem Dropdown

-1

Ich entwerfe eine Seite, wo zuerst eine Stadt ausgewählt werden soll. Jetzt kann ich den Button und das Drop-Down-Element darin finden, aber es bleibt oben auf der Seite. Ich möchte in der Lage sein, es in die Mitte oder wahrscheinlich in die linke Mitte der Seite zu verschieben. Hier ist mein Code:Wie verschiebe ich diese Schaltfläche zusammen mit dem Dropdown

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.dropbtn { 
    background-color: #4CAF50; 
    color: white; 
    padding: 16px 40px; 
    font-size: 16px; 
    border: none; 
    cursor: pointer; 
} 

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

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

.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    overflow: auto; 
    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 a:hover {background-color: #f1f1f1} 

.show {display:block;} 
</style> 
</head> 
<body> 


<div class="dropdown"> 
<button onclick="myFunction()" class="dropbtn">Select City</button> 
<div id="myDropdown" class="dropdown-content"> 
<a href="#home">Mumbai</a> 

</div> 
</div> 

<script> 
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */ 
function myFunction() { 
document.getElementById("myDropdown").classList.toggle("show"); 
} 

// Close the dropdown if the user clicks outside of it 
window.onclick = function(event) { 
if (!event.target.matches('.dropbtn')) { 

var dropdowns = document.getElementsByClassName("dropdown-content"); 
var i; 
for (i = 0; i < dropdowns.length; i++) { 
    var openDropdown = dropdowns[i]; 
    if (openDropdown.classList.contains('show')) { 
    openDropdown.classList.remove('show'); 
    } 
} 
} 
}

Ich bin ein Neuling auf diesem.

Quelle

2016-07-16 thought_projekt

Ich bin nicht sicher, aber vielleicht wollen Sie es: verändern css: -

.dropdown { 
    position: relative; 
    display: block; 
    text-align: center; 
} 
.dropdown-content { 
    display: none; 
    position: relative; 
    background-color: #f9f9f9; 
    max-width: 160px; 
    overflow: auto; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    margin: auto; 
}

/* When the user clicks on the button, 
 
toggle between hiding and showing the dropdown content */ 
 
function myFunction() { 
 
document.getElementById("myDropdown").classList.toggle("show"); 
 
} 
 

 
// Close the dropdown if the user clicks outside of it 
 
window.onclick = function(event) { 
 
if (!event.target.matches('.dropbtn')) { 
 

 
var dropdowns = document.getElementsByClassName("dropdown-content"); 
 
var i; 
 
for (i = 0; i < dropdowns.length; i++) { 
 
    var openDropdown = dropdowns[i]; 
 
    if (openDropdown.classList.contains('show')) { 
 
    openDropdown.classList.remove('show'); 
 
    } 
 
} 
 
} 
 
}

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

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

 
.dropdown { 
 
    position: relative; 
 
    display: block; 
 
    text-align: center; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: relative; 
 
    background-color: #f9f9f9; 
 
    max-width: 160px; 
 
    overflow: auto; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    margin: auto; 
 
} 
 

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

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

 
.show {display:block;}

<div class="dropdown"> 
 
<button onclick="myFunction()" class="dropbtn">Select City</button> 
 
<div id="myDropdown" class="dropdown-content"> 
 
<a href="#home">Mumbai</a> 
 

 
</div> 
 
</div>

Quelle

2016-07-16 15:41:05

durch einen Behälter mit width: 100%; um die Schaltfläche Hinzufügen Sie verwenden können text-align: center; zentrieren Sie die Taste horizontal (die entfernt werden kann, wenn Sie möchten, dass sie horizontal auf der linken Seite ausgerichtet ist) und verwenden Sie position: absolute; mit top: 50%;, um zu zentrieren vertikal;

Beachten Sie, dass ich auch margin-top: -38px; auf dem Container hinzugefügt, die Hälfte der Höhe der Schaltfläche, um die top: 50%; Tween, die Ausrichtung der Schaltfläche basierend auf der Oberseite der Schaltfläche statt der Mitte.

Sie einen Blick auf dieses Thema nehmen, um weitere Möglichkeiten, horizontal und vertikal ausrichten: https://stackoverflow.com/a/19461564/5583283

/* When the user clicks on the button, 
 
toggle between hiding and showing the dropdown content */ 
 
function myFunction() { 
 
    document.getElementById("myDropdown").classList.toggle("show"); 
 
} 
 

 
// Close the dropdown if the user clicks outside of it 
 
window.onclick = function(event) { 
 
    if (!event.target.matches('.dropbtn')) { 
 

 
    var dropdowns = document.getElementsByClassName("dropdown-content"); 
 
    var i; 
 
    for (i = 0; i < dropdowns.length; i++) { 
 
     var openDropdown = dropdowns[i]; 
 
     if (openDropdown.classList.contains('show')) { 
 
     openDropdown.classList.remove('show'); 
 
     } 
 
    } 
 
    } 
 
}

.container { 
 
    position: absolute; 
 
    margin-top: -38px; /* this represent half the height of the button */ 
 
    top: 50%; 
 
    text-align: center; /* remove this to align on the left */ 
 
    width: 100%; 
 
} 
 

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

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

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

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    overflow: auto; 
 
    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 a:hover { 
 
    background-color: #f1f1f1 
 
} 
 

 
.show { 
 
    display: block; 
 
}

<div class="container"> 
 
    <div class="dropdown"> 
 
    <button onclick="myFunction()" class="dropbtn">Select City</button> 
 
    <div id="myDropdown" class="dropdown-content"> 
 
     <a href="#home">Mumbai</a> 
 
    </div> 
 
    </div> 
 
</div>

Quelle

2016-07-16 15:44:18 j3ff

Wie verschiebe ich diese Schaltfläche zusammen mit dem Dropdown

Antwort

Verwandte Themen