我有兩個下拉按鈕，當您單擊“難度”按鈕時，“持續時間”按鈕會移到底部；同樣，如果您單擊“持續時間”按鈕，它會將“難度”按鈕移至底部。
有趣的是，當先點擊難度按鈕，然后點擊持續時間按鈕時，兩者都將是正確的高度；但是如果你先點擊 Duration 按鈕，然后點擊 Difficulty 按鈕，只有 Duration 按鈕會關閉其內容并再次移動到底部。這就是我的代碼的樣子：
HTML 代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style_MP.css"/>
</head>
<body>
<div class="main_page">
<h1>Welcome to My Typing Test!</h1>
<h2>Select Your Difficulty and Duration</h2>
<div>
<!--Below, the word "diff" is short for "difficulty" -->
<!--So "diff-settings" means "difficulty settings" -->
<!--"diff-options" means "difficulty options" and so on -->
<div class="difficulty">
<button onclick="myfunction01()" class="diff-settings">Difficulty</button>
<div class="diff-options" id="diff-select">
<a href="beginner">Beginner</a>
<a href="intermediate">Intermediate</a>
<a href="advanced">Advanced</a>
<a href="expert">Expert</a>
</div>
</div>
<div class="duration">
<button onclick="myfunction02()" class="duration-settings">Duration</button>
<div class="duration-options" id="duration-select">
<a href="30-seconds">30 Seconds</a>
<a href="60-seconds">60 Seconds</a>
<a href="120-seconds">120 Seconds</a>
<a href="custom">Custom</a>
</div>
</div>
<script src="script_MP.js"></script>
</body>
</html>
CSS 代碼：
body{background-color:grey}
.main_page{text-align: center;}
h1{font-size: 50px;}
h2{font-size: 30px; padding-bottom: 40px;}
.difficulty , .duration{
display: inline-block;
margin: 5px;
}
/* This section is for the Difficulty Button only */
.diff-settings{
padding: 20px;
position: relative;
border: none;
box-shadow: none;
background-color: green;
color:white;
font-size: 20px;
width: 130px;
}
.diff-settings:hover, .diff-settings:focus{
background-color:darkgreen;
color:white;
cursor: pointer;
}
.diff-options{
display: none;
font-size: 20px;
width: 130px;
}
.diff-options a{
background-color: green;
color: white;
display: block;
padding: 8px;
text-decoration: none;
}
.diff-options a:hover {background-color: darkgreen;}
.show {display: block;}
/* This section is for the Duration Button only */
.duration-settings{
padding: 20px;
border: none;
box-shadow: none;
background-color: green;
color:white;
font-size: 20px;
width: 130px;
}
.duration-settings:hover, .duration-settings:focus{
background-color:darkgreen;
color:white;
cursor: pointer;
}
.duration-options{
display: none;
font-size: 20px;
width: 130px;
}
.duration-options a{
background-color: green;
color: white;
display: block;
padding: 8px;
text-decoration: none;
}
.duration-options a:hover {background-color: darkgreen;}
.show {display: block;}
為了阻止兩個按鈕在單擊時移到底部，我應該更改什么？
uj5u.com熱心網友回復：
只需添加這個;)：
.diff-options, .duration-options {
position: absolute;
}
當您更改塊的顯示時，會考慮并移動以下元素。通過添加絕對位置，計算下一個元素時不再考慮它。
uj5u.com熱心網友回復：
使按鈕的父 div 使用 flex 可以解決問題。
.flex{
display: flex;
justify-content: center;
}<div class="flex">
<!--Below, the word "diff" is short for "difficulty" -->
<!--So "diff-settings" means "difficulty settings" -->
<!--"diff-options" means "difficulty options" and so on -->
<div class="difficulty">
<button onclick="myfunction01()" class="diff-settings">Difficulty</button>
<div class="diff-options" id="diff-select">
<a href="beginner">Beginner</a>
<a href="intermediate">Intermediate</a>
<a href="advanced">Advanced</a>
<a href="expert">Expert</a>
</div>
</div>
<div class="duration">
<button onclick="myfunction02()" class="duration-settings">Duration</button>
<div class="duration-options" id="duration-select">
<a href="30-seconds">30 Seconds</a>
<a href="60-seconds">60 Seconds</a>
<a href="120-seconds">120 Seconds</a>
<a href="custom">Custom</a>
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/405852.html
標籤：