Al principio había 4 botones, solo quería 3, así que eliminé el cuarto y es por eso que quiero que los 3 restantes se vean centrados horizontalmente, se ve raro debido al espacio en blanco del cuarto botón. Intenté algunas cosas pero no funcionaron.
var tabButtons = document.querySelectorAll(".tabContainer .buttonContainer button"); var tabPanels = document.querySelectorAll(".tabContainer .tabPanel"); function showPanel(panelIndex, colorCode) { tabButtons.forEach(function(node) { node.style.backgroundColor = ""; node.style.color = ""; }); tabButtons[panelIndex].style.backgroundColor = colorCode; tabButtons[panelIndex].style.color = "white"; tabPanels.forEach(function(node) { node.style.display = "none"; }); tabPanels[panelIndex].style.display = "block"; tabPanels[panelIndex].style.backgroundColor = colorCode; } showPanel(0, '#f44336'); .title { color: #dc2d5e; text-align: center; } .tabContainer { width: 100%; height: 350px; } .tabContainer .buttonContainer { height: 15%; align-items: center; align-content: center; justify-content: center; text-align: center; } .tabContainer .buttonContainer button { width: 25%; height: 100%; float: left; border: none; outline: none; cursor: pointer; padding: 10px; font-family: sans-serif; font-size: 18px; background-color: #eee; } .tabContainer .buttonContainer button:hover { background-color: #d7d4d4; } .tabContainer .tabPanel { height: 85%; background-color: gray; color: white; text-align: center; padding-top: 105px; box-sizing: border-box; font-family: sans-serif; font-size: 22px; display: none; } <h1 class="title">Recieved Data</h1> <div class="tabContainer"> <div class="buttonContainer"> <button onclick="showPanel(0,'#f44336')">Feedbacks</button> <button onclick="showPanel(1,'#4caf50')">Suggestions</button> <button onclick="showPanel(2,'#2196f3')">Messages</button> </div> <div class="tabPanel">Tab 1:Content</div> <div class="tabPanel">Tab 2:Content</div> <div class="tabPanel">Tab 3:Content</div> </div>Está muy cerca, agregando estas dos propiedades flexibles puede obtener la solución deseada:
.tabContainer .buttonContainer{ display: flex; justify-content: space-between; } .title{ color: #dc2d5e; text-align: center; } .tabContainer{ width: 100%; height: 350px; } .tabContainer .buttonContainer{ display: flex; height: 15%; align-items: center; align-content: center; justify-content: space-between; text-align: center; } .tabContainer .buttonContainer button{ width: 25%; height: 100%; float: left; border: none; outline:none; cursor: pointer; padding: 10px; font-family: sans-serif; font-size: 18px; background-color: #eee; } .tabContainer .buttonContainer button:hover{ background-color: #d7d4d4; } .tabContainer .tabPanel{ height: 85%; background-color: gray; color: white; text-align: center; padding-top: 105px; box-sizing: border-box; font-family: sans-serif; font-size: 22px; display: none; } <h1 class="title">Recieved Data</h1> <div class="tabContainer"> <div class="buttonContainer"> <button onclick="showPanel(0,'#f44336')">Feedbacks</button> <button onclick="showPanel(1,'#4caf50')">Suggestions</button> <button onclick="showPanel(2,'#2196f3')">Messages</button> </div> <div class="tabPanel">Tab 1:Content</div> <div class="tabPanel">Tab 2:Content</div> <div class="tabPanel">Tab 3:Content</div> </div>¡Esta guía de flexbox es mi opción cada vez que me encuentro con este tipo de problema!
Como ahora solo hay 3 botones, haría que el ancho de cada uno fuera un tercio.
Puedes lograr esto haciendo:
.tabContainer .buttonContainer button{ width: calc(100% / 3); }EDITAR: Entonces se vería así:
var tabButtons = document.querySelectorAll(".tabContainer .buttonContainer button"); var tabPanels = document.querySelectorAll(".tabContainer .tabPanel"); function showPanel(panelIndex, colorCode) { tabButtons.forEach(function(node) { node.style.backgroundColor = ""; node.style.color = ""; }); tabButtons[panelIndex].style.backgroundColor = colorCode; tabButtons[panelIndex].style.color = "white"; tabPanels.forEach(function(node) { node.style.display = "none"; }); tabPanels[panelIndex].style.display = "block"; tabPanels[panelIndex].style.backgroundColor = colorCode; } showPanel(0, '#f44336'); .title { color: #dc2d5e; text-align: center; } .tabContainer { width: 100%; height: 350px; } .tabContainer .buttonContainer { height: 15%; align-items: center; align-content: center; justify-content: center; text-align: center; } .tabContainer .buttonContainer button { width: calc(100% / 3); height: 100%; float: left; border: none; outline: none; cursor: pointer; padding: 10px; font-family: sans-serif; font-size: 18px; background-color: #eee; } .tabContainer .buttonContainer button:hover { background-color: #d7d4d4; } .tabContainer .tabPanel { height: 85%; background-color: gray; color: white; text-align: center; padding-top: 105px; box-sizing: border-box; font-family: sans-serif; font-size: 22px; display: none; } <h1 class="title">Recieved Data</h1> <div class="tabContainer"> <div class="buttonContainer"> <button onclick="showPanel(0,'#f44336')">Feedbacks</button> <button onclick="showPanel(1,'#4caf50')">Suggestions</button> <button onclick="showPanel(2,'#2196f3')">Messages</button> </div> <div class="tabPanel">Tab 1:Content</div> <div class="tabPanel">Tab 2:Content</div> <div class="tabPanel">Tab 3:Content</div> </div>calc() es ampliamente compatible con los navegadores modernos.
¡Solo necesitas agregar esto a tu css!
.buttonContainer{ display: flex; }