为什么单击按钮时按钮会上下移动？答案

【问题标题】：Why do my buttons move up and down when I click on them?为什么单击按钮时按钮会上下移动？
【发布时间】：2022-01-06 15:29:45
【问题描述】：

我有两个下拉按钮，当你点击它时，难度按钮会使持续时间按钮移到底部；同样，如果您点击持续时间按钮，它会将难度按钮移至底部。

有趣的是，当先点击难度按钮，然后点击持续时间按钮时，两者都将是正确的高度；但是如果你先点击 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;}

我应该改变什么来阻止两个按钮在被点击时移动到底部？

【问题讨论】：

请把它变成minimal reproducible example（使用编辑器中的<>按钮）

标签： html css button

【解决方案1】：

只需添加这个 ;) :

.diff-options, .duration-options {
  position: absolute;
}

当您更改块的显示时，会考虑并移动以下元素。通过添加绝对位置，计算下一个元素时不再考虑。

【讨论】：

【解决方案2】：

使按钮的父 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>

【讨论】：