CSS implementiert horizontale Schaltflächen ohne andere Techniken
P粉893457026
2023-09-04 12:29:02
<p>Ich versuche, zwei horizontale Schaltflächen mit der gleichen Breite zu erstellen – basierend auf der Breite der längsten Schaltfläche. </p>
<ul>
<li>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. </li>
<li>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). </li>
<li>Ich möchte, dass die Schaltflächen standardmäßig horizontal angezeigt werden. Wenn sie jedoch nicht horizontal angezeigt werden, werden sie als Spalten gestapelt. </li>
<li>Ich muss den Text der Schaltfläche umbrechen, wenn der gesamte Text nicht hineinpasst. </li>
</ul>
<pre class="brush:php;toolbar:false;"><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></pre>
<p>Ich habe verschiedene Optionen ausprobiert ... aber es funktioniert nicht! </p>
<ul>
<li>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. </li>
<li>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. </li>
</ul>
<p>Bitte helfen Sie! </p>
<p>Vielen Dank!
Damian. </p>
让我们尝试这个选项。您对这种方法有什么不喜欢的地方?
A: 在这种情况下,容器/按钮占据了整个页面的宽度...它们不会根据文本的宽度进行调整。
Q: 好的,那么: