CSS implementiert horizontale Schaltflächen ohne andere Techniken

Question

Ich versuche, zwei horizontale Schaltflächen mit der gleichen Breite zu erstellen – basierend auf der Breite der längsten Schaltfläche.

• Der Textinhalt jeder Schaltfläche kann vom Benutzer auf einer separaten Seite angepasst werden... daher habe ich keine Kontrolle über deren Textlänge/die Textlänge der ersten Schaltfläche und der zweiten Schaltfläche.
• Ich möchte, dass sich die Schaltfläche an die Länge des längsten Textes anpasst, aber nicht die Breite der Seite überschreitet (wie auf Mobilgeräten).
• Ich möchte, dass die Schaltflächen standardmäßig horizontal angezeigt werden. Wenn sie jedoch nicht horizontal angezeigt werden, werden sie als Spalten gestapelt.
• Ich muss den Text der Schaltfläche umbrechen, wenn der gesamte Text nicht hineinpasst.

<div class="button-container">
     <div class="horizontal-button" data-role="yes">Ja</div>
     <div class="horizontal-button" data-role="no">Nein, tut mir leid – das kann ich nicht</div>
</div>

Ich habe verschiedene Optionen ausprobiert ... aber es funktioniert nicht!

• Wenn ich das Rasterlayout „grid-template-colums: 1fr 1fr“ verwende, kann ich keine Möglichkeit finden, die Schaltflächen bei Bedarf in Spalten zu stapeln.
• Ich finde keine Möglichkeit, die Breite der Schaltfläche an die Länge des Textes anzupassen, wenn ich flex und flex:1 1 0 verwende.

Bitte helfen Sie!

Vielen Dank! Damian.

Answer 1

让我们尝试这个选项。您对这种方法有什么不喜欢的地方？

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>

A: 在这种情况下，容器/按钮占据了整个页面的宽度...它们不会根据文本的宽度进行调整。

Q: 好的，那么：

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>