css 两行文本的按钮与一行文本的按钮不一致，但宽度、高度、边距和填充都已设置

fdx2calv 于 2023-04-01 发布在其他

关注(0)|答案(2)|浏览(112)

当一个按钮上的文本换行成两行时，按钮会跳出与其他按钮的行，在这里阅读类似的问题buttons with 2 lines of text are larger than buttons with 1 line of text, but i need them all to be the same size as the 1 line（与按钮大小有关）时，它说要确保设置宽度和高度。我已经设置了这些，但与一行版本相比，两行按钮仍然不一致。
我怎样才能强制它们都是相同的集合大小，并始终保持彼此内联？

.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>

css

来源：https://stackoverflow.com/questions/69656140/buttons-with-2-lines-of-text-out-of-line-with-buttons-with-1-line-of-text-dispit

2条答案

按热度按时间

avkwfej41#

我现在已经让他们排队与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>

赞(0）回复(0）举报 2023-04-01

iq3niunx2#

更简单的解决方案是将vertical-align: top;添加到.abutton样式中。

.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;
vertical-align: top;
}
.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>

赞(0）回复(0）举报 2023-04-01

我来回答

css 两行文本的按钮与一行文本的按钮不一致，但宽度、高度、边距和填充都已设置

2条答案

相关问题

热门标签

最新问答