亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

<p>我正在嘗試創(chuàng)建兩個(gè)水平按鈕，它們的寬度相同 - 基於最長(zhǎng)按鈕的寬度。 </p> <ul> <li>每個(gè)按鈕的文字內(nèi)容可以由使用者在單獨(dú)的頁(yè)面上調(diào)整...因此我無(wú)法控制他們的文字長(zhǎng)度/第一個(gè)按鈕和第二個(gè)按鈕的文字長(zhǎng)度。 </li> <li>我希望按鈕能夠根據(jù)最長(zhǎng)文字的長(zhǎng)度進(jìn)行調(diào)整，但不要超出頁(yè)面的寬度（例如在行動(dòng)裝置上）。 </li> <li>我希望按鈕預(yù)設(shè)水平顯示，但如果它們不能水平顯示，則堆疊為列。 </li> <li>如果整個(gè)文字無(wú)法適應(yīng)，我需要按鈕的文字換行。 </li> </ul> <pre class="brush:php;toolbar:false;"><div class="button-container"> <div class="horizo??ntal-button" data-role="yes">是</div> <div class="horizo??ntal-button" data-role="no">不，抱歉 - 我不能做到</div> </div></pre> <p>我嘗試了多種選項(xiàng)...但無(wú)法使其正常工作！ </p> <ul> <li>當(dāng)使用網(wǎng)格佈局grid-template-colums: 1fr 1fr時(shí)，我找不到一種方法來(lái)在需要時(shí)將按鈕堆疊為列。 </li> <li>當(dāng)使用flex和flex:1 1 0時(shí)，我找不到一種方法來(lái)使按鈕的寬度適應(yīng)文字的長(zhǎng)度。 </li> </ul> <p>請(qǐng)幫忙！ </p> <p>非常感謝！ 達(dá)米安。 </p>

div {
  background-color: rgba(0, 0, 0, 0.1);
}

.button-container {
  padding: 16px;
  display: flex;
  gap: 16px;
}

.horizontal-button {
  padding: 16px;
  flex: 1;
  text-align: center;
  word-wrap: hypens;
}

@media (max-width: 360px) {
  .button-container {
    flex-direction: column;
  }
}

<div class="button-container">
  <div class="horizontal-button" data-role="yes">Yes</div>
  <div class="horizontal-button" data-role="no">No, sorry - I cannot make it</div>
</div>

div {
  background-color: rgba(0, 0, 0, 0.1);
}

.button-container {
  margin: auto;
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  gap: 16px;
  max-width: max-content;
}

.horizontal-button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px;
  flex: 1;
  text-align: center;
  max-width: 50%;
}

@media (max-width: 360px) {
  .button-container {
    flex-direction: column;
  }
  .horizontal-button {
    hyphens: auto;
    max-width: unset;
  }
}

<div class="button-container">
  <div class="horizontal-button" data-role="yes">Yes</div>
  <div class="horizontal-button" data-role="no">No, sorry - I cannot make it</div>
</div>