我試圖顯示兩個按鈕，id="strength"當id="minion"我單擊一個按鈕時，id="expandButton"當我再次單擊該按鈕時隱藏它們。我希望創建的兩個按鈕位于創建它們的按鈕的任一側。我嘗試將它們放在<div>一起并使用 and 添加一個類display: flex;，justify-content: space-around;但這只是將按鈕放在創建它的按鈕上方彼此相鄰。理想情況下，我需要一種方法將兩個按鈕向下移動一點，以便所有按鈕都排成一行。
小提琴： https ://jsfiddle.net/eL8omg9x/
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="container">
<button id="strength"><strong class="center">Strength</strong></button>
<button id="expandButton" onclick="expandSkills()"><strong class="center">Expand</strong></button>
<button id="minion"><strong class="center">Minion</strong></button>
</div>
<button id="xpButton"><strong class="center">Click Me!</strong></button>
</div>
<script src="main.js"></script>
</body>
</html>
CSS：
.container {
display: flex;
justify-content: space-around;
}
#strength {
display: none;
cursor: pointer;
height: 100px;
width: 100px;
border: 2px solid green;
border-radius: 10px;
background-color: white;
color: green;
}
#expandButton {
display: flex;
margin-top: 100px;
cursor: pointer;
height: 150px;
width: 150px;
border: 2px solid green;
border-radius: 10px;
background-color: white;
color: green;
}
#minion {
display: none;
cursor: pointer;
height: 100px;
width: 100px;
border: 2px solid green;
border-radius: 10px;
background-color: white;
color: green;
}
#xpButton {
display: flex;
margin-top: 100px;
cursor: pointer;
height: 150px;
width: 150px;
border: 2px solid green;
border-radius: 10px;
background-color: white;
color: green;
}
.center {
display: flex;
margin: auto;
}
JavaScript：
function expandSkills() {
let x = document.getElementById("strength");
let y = document.getElementById("minion");
let z = document.getElementById("skillsContainer");
if (x.style.display === "none") {
x.style.display = "flex";
y.style.display = "flex";
z.style.justifyContent = "space-evenly";
} else {
x.style.display = "none";
y.style.display = "none";
z.style.justifyContent = "space-evenly";
}
}
uj5u.com熱心網友回復：
- 在顯示兩個按鈕的程序中添加邊距頂部或
- 從展開按鈕 css 中洗掉 margin-top 也可以，因為添加了展開按鈕 margin-top
function expandSkills() {
let x = document.getElementById("strength");
let y = document.getElementById("minion");
if (x.style.display === "none") {
x.style.display = "flex";
y.style.display = "flex";
**//ADDING MARGIN TOP**
y.style.margin = "100px 0 0 0";
x.style.margin = "100px 0 0 0";
} else {
x.style.display = "none";
y.style.display = "none";
}
}洗掉了技能容器代碼，因為它沒有在 html 中定義
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/436788.html
標籤：javascript html css
上一篇：如何在滾動容器內拉伸全高div？
下一篇：懸停時按鈕邊框無法正常作業