使按钮保持HTML对齐

Question

Everytime when I press on Button 1 , Button 2 and Button 3 are going below Button 1 (same with Button 2 ). Here is a working snippet

I want something like this to happen (everytime I press on a new button, the new text overrides the previous text, and the alignment is kept).

What do I need to change in order to achieve what I want? Thank you for your time!

Answer 1

Structure you html like this.

Place the text inside the container element for each button.

Set the container elements display to inline-block

Answer 2

Here is the code for you :

 function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } 

 body { font-family: Arial; } .tab { overflow: hidden; } .tab button { cursor: pointer; padding: 6px 10px; transition: 0.3s; font-size: 17px; } .tabcontent { display: none; padding: 6px 12px; border-top: none; } 

 <meta name="viewport" content="width=device-width, initial-scale=1"> <div class="tab"> <button class="tablinks" onclick="openCity(event, 'London')">London</button> <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button> <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> </div> <div id="London" class="tabcontent"> <h3>London</h3> <p>London is the capital city of England.</p> </div> <div id="Paris" class="tabcontent"> <h3>Paris</h3> <p>Paris is the capital of France.</p> </div> <div id="Tokyo" class="tabcontent"> <h3>Tokyo</h3> <p>Tokyo is the capital of Japan.</p> </div> 

Answer 3

You need to set the div's which are containing the text to display: inline-block;

div {
  display: inline-block
}

Answer 4

Here is the updated code snippet. I've restructured the html and took the text div at the end after buttons are added. This way the buttons remain in same position. For replacing the text, I've used a variable which is changed on button click and the value is updated on html.

Hope this is what you wanted to achieve.