如何獨立於文本大小阻止按鈕大小？

Question

所以我試圖讓我的按鈕像這樣。 我已經嘗試為每個按鈕組創建容器並將它們的填充設置為 50px 60px 每次說，但這不起作用，它們仍然拉伸。

我有這個：

這是代碼：

 .container5 { background-image: url("servicos.svg"); width: 100vw; height: 100vh; background-size: contain; max-width: 100%; left: 0; } .container5 .underline { padding-top: 20px; padding-bottom: 10px; text-decoration: none; border-bottom: 5px solid rgb(220,52,52); } .container5 h1 { margin: auto; line-height: 30px; vertical-align: middle; margin-left: 10vh; weight: 950; padding-top: 10vh; font-family: 'Source Sans Pro', sans-serif; font-size: 50px; color: #000; } .container5 .btn-group { left: 0; margin-left: 5vw; } .container5 .btn-group button { color: white; background-color: #05031b; font-family: Helvetica, Arial, Sans-Serif; font-size: 15px; text-decoration: none; position: relative; padding: 40px 35px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; margin: 0 10px 0 0; } .container5 .btn-group .btn-group-ls { font-size: 10px; } .container5 .btn-group2 { left: 0; margin-top: 3vh; padding: 40px 30px; } .container5 .btn-group2 button { color: white; background-color: #05031b; font-family: Helvetica, Arial, Sans-Serif; font-size: 15px; text-decoration: none; position: relative; margin: 0 10px 0 0; left: 0; } .container5 .btn-group3 { margin-top: 3vh; } .container5 .btn-group3 button { color: white; background-color: #05031b; font-family: Helvetica, Arial, Sans-Serif; font-size: 15px; text-decoration: none; position: relative; padding: 40px 30px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; margin: 0 10px 0 0; }

 <section class="container5" id="servicos"> <h1><u class="underline">Ser</u>viços </h1> <div class="btn-group"> <button>VIDEO AULAS</button> <button> LIVES DIARIAS <br> <div class="btn-group-ls"> (ANALISE DO MERCADO) </div> </button> <button>SALA DE SINAIS</button> <div> <div class="btn-group2"> <button> LIVES SEMANAIS <br> <div class="btn-group-ls"> (RESTROSPECTIVA DO MERCADO) </div> </button> <button> LIVES SEMANAIS <br> <div class="btn-group-ls"> (PARA DUVIDAS) <!-- Edit by tacoshy: Missing a div closing tag here --> </button> <button>MATERIAIS DIDATICOS</button> <div> <div class="btn-group3"> <button>FERRAMENTAS DE AUXILIO</button> <button> PREMIAÇÃO POR <br> DESEMPENHO (MENSAL) </button> <button>PROGRAMA DE TALENTOS</button> <div> <!-- Edit by tacoshy: as you see missing a lot closing tags --> </section>

如何制作與第一張圖片中的按鈕類似的按鈕？ 我的尺寸不穩定，如果句子太大會改變。 有什么想法嗎？ 謝謝你。

編輯

我設法對齊所有按鈕，但是，對如何調平按鈕有任何猜測嗎？ 那些有更多文本的人比其他人低幾個像素。

Answer 1

您可以對它們應用width和高度設置。 為了使它們都具有相同的高度（不管它們中的文本數量如何），還要添加一個至少與最高按鈕一樣高的min-height設置。

要正確居中對齊它們旁邊的文本，您可以使用display:flex; justify-content: center; align-items: center; display:flex; justify-content: center; align-items: center; 在按鈕本身上。`