如何將此按鈕與下拉菜單一起移動

-1

我正在設計一個應首先選擇城市的頁面。現在我可以獲得按鈕和下拉項目，但它保持在頁面的頂部。我希望能夠將其移動到中心或可能位於頁面的左側中間。這裏是我的代碼：如何將此按鈕與下拉菜單一起移動

<!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'); 
    } 
} 
} 
}

我對這個新手。

來源

2016-07-16 thought_projekt

我不知道，但也許你想要的：更改此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>

來源

2016-07-16 15:41:05

通過周圍，您可以使用text-align: center;到按鈕添加一個容器width: 100%;水平居中按鈕（如果您希望它左側水平對齊，可以將其取下）並使用position: absolute;和top: 50%;居中垂直;

請注意，我還在容器上添加了margin-top: -38px;，它代表按鈕高度的一半，用於對齊基於按鈕頂部而不是中間的按鈕的top: 50%;。

你可以看看這篇文章更多的方式來水平和垂直對齊：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>

來源

2016-07-16 15:44:18 j3ff

如何將此按鈕與下拉菜單一起移動

回答

相關問題