CSS melaksanakan butang mendatar tanpa teknik lain

Question

Saya cuba mencipta dua butang mendatar yang mempunyai lebar yang sama - berdasarkan lebar butang terpanjang.

• Kandungan teks setiap butang boleh dilaraskan oleh pengguna pada halaman yang berasingan...jadi saya tidak mempunyai kawalan ke atas panjang teks mereka/panjang teks butang pertama dan butang kedua.
• Saya mahu butang melaraskan kepada panjang teks terpanjang, tetapi tidak melebihi lebar halaman (seperti pada peranti mudah alih).
• Saya mahu butang muncul secara mendatar secara lalai, tetapi jika ia tidak muncul secara mendatar, disusun sebagai lajur.
• Saya memerlukan teks butang untuk dibalut jika keseluruhan teks tidak muat.

<div class="butang-bekas">
     <div class="horizontal-button"peranan data="ya">Ya</div>
     <div class="horizontal-button"data-role="tidak">Tidak, maaf - saya tidak boleh berbuat demikian</div>
</div>

Saya mencuba pelbagai pilihan...tetapi tidak berjaya!

• Apabila menggunakan grid-template-colums reka letak grid: 1fr 1fr, saya tidak dapat mencari cara untuk menyusun butang ke dalam lajur apabila diperlukan.
• Saya tidak dapat mencari cara untuk menjadikan lebar butang sesuai dengan panjang teks apabila menggunakan flex dan flex:1 1 0.

Tolong bantu!

Terima kasih banyak-banyak! Damian.

Answer 1

Jom cuba pilihan ini. Apakah yang anda tidak suka tentang pendekatan ini?

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>

J: Dalam kes ini bekas/butang mengambil keseluruhan lebar halaman... mereka tidak menyesuaikan dengan lebar teks.

S: Baiklah, kemudian:

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>