Why does the button move up and down when the button is clicked?-Tech Notes

Why does the button move up and down when the button is clicked?

Technical otaku 2022-02-25

I have two dropdown buttons, when you click the Difficulty button, the Duration The button moves to the bottom; Similarly, if you click the Duration button, it moves the Difficulty button to the bottom.

Interestingly, when the difficulty button is clicked first, then the duration button, both will be Correct height; but if you click the Duration button first, then the Difficulty button, only the Duration button closes its content and moves to the bottom again.This is what my code looks like:

HTML code:

<!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 code:

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;}

What should I change to stop the two buttons from moving to the bottom when clicked?

uj5u.com enthusiastic netizens replied:

Just add this ;):

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

The following elements are considered and moved when you change the display of blocks.By adding an absolute position, it is not considered when calculating the next element.

uj5u.com enthusiastic netizens replied:

Making the button's parent div use flex does the trick.

.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 Secondds</a>
         <a href="60-seconds">60 Seconds</a>
         <a href="120-seconds">120 Seconds</a>
         <a href="custom">Custom</a>
     </div>
     </div>
</div>

Technical otaku

Sought technology together