html - 带有 2 行文本的按钮与带有 1 行文本的按钮尽管宽度、高度、边距和填充都已设置

Question

当按钮上的文本换行到两行时，按钮与其他按钮跳出线，在阅读类似的问题时，带有 2 行文本的按钮比带有 1 行文本的按钮大，但我需要它们都是与 1 行（与按钮大小有关）相同的大小，以确保设置宽度和高度。我已经设置了这些，但是与单线版本相比，2 行按钮仍然不符合要求。

我怎样才能强制它们都具有相同的设置大小并始终保持彼此内联？

.qcontain {
  width: 400px;
  display: inline-block;
}

.qnumber {
  display: inline-block;
}

.qtext {
  display: inline-block;
  color: #666666;
  font-family: Arial;
  font-size: 18px;
  font-weight: bold;
}

.abutton {
  box-shadow: inset 0px 1px 0px 0px #ffffff;
  background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
  background-color: rgba(0, 0, 0, 0);
  background-color: #f9f9f9;
  border-radius: 12px;
  border: 4px solid #dcdcdc;
  display: inline-block;
  cursor: pointer;
  color: #666666;
  font-family: Arial;
  font-size: 15px;
  font-weight: bold;
  padding: 10px 10px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #ffffff;
  width: 195px;
  height: 100px;
  margin-left: 3px;
  margin-top: 3px;
  white-space: normal;
}

.abutton:hover {
  background: linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
  background-color: #e9e9e9;
}

.abutton:active {
  position: relative;
  top: 1px;
}

<div class="qcontain">
<h1 class="qnumber">Q1:</h1><br>
<div class="qtext">Should you eat yellow snow?</div><hr>
<button class="abutton">Hell Yeah</button><button class="abutton">Never</button><br>
<button class="abutton">Only on Tuesdays</button><button class="abutton">Only as part of balanced diet</button>
</div>

标签： htmlcssbutton

Answer 1

我现在已经让它们与 css 网格对齐，但不禁认为这太过分了，我只是在第一次尝试时错过了一些简单的东西。

.qcontain {
width:100%;
max-width:500px;
display:inline-block;   
}
.qnumber {
display:inline-block;   
}
.qtext {
display:inline-block;   
font-family: Arial;
font-size: 28px;
font-weight: bold;
}
.abutton {
box-shadow: inset 0px 1px 0px 0px #ffffff;
background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
    background-color: rgba(0, 0, 0, 0);
background-color: #f9f9f9;
border-radius: 12px;
border: 4px solid #dcdcdc;
display: inline-block;
font-family: Arial;
font-size: 20px;
font-weight: bold;
cursor: pointer;
color: #666666;
padding: 10px 10px;
text-decoration: none;
text-shadow: 0px 1px 0px #ffffff;
width: 99%;
margin-left: 3px;
margin-top: 3px;
height: 100px;
white-space: normal;
}
.abutton:hover {
    background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
    background-color:#e9e9e9;
}
.abutton:active {
    position:relative;
    top:1px;
}
.ansgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "a1 a2"
    "a3 a4";
}

.a1 { grid-area: a1; }

.a2 { grid-area: a2; }

.a3 { grid-area: a3; }

.a4 { grid-area: a4; }

<div class="qcontain">
<h1 class="qnumber">Q1:</h1><br>
<div class="qtext">Should you eat yellow snow?</div><hr>
<div class="ansgrid">
  <div class="a1"><button class="abutton">Hell Yeah</button></div>
  <div class="a2"><button class="abutton">Never</button></div>
  <div class="a3"><button class="abutton">Only on Tuesdays</button></div>
  <div class="a4"><button class="abutton">Only as part of balanced diet</button></div>
</div>