CSS は他のテクニックを使わずに水平ボタンを実装します
<p>最長のボタンの幅に基づいて、同じ幅の 2 つの水平ボタンを作成しようとしています。 </p>
<li>各ボタンのテキスト内容は、ユーザーが別のページで調整できます。そのため、テキストの長さ/最初のボタンと 2 番目のボタンのテキストの長さを制御することはできません。 </li>
<li>ボタンを最長テキストの長さに合わせて調整しますが、ページの幅を超えないようにしておきます (モバイル デバイスなど)。 </li>
<li>デフォルトでボタンを水平に表示したいのですが、水平に表示されない場合は、列として積み上げられます。 </li>
<li>テキスト全体が収まらない場合は、ボタンのテキストを折り返す必要があります。 </li>
</ul>
<pre class="brush:php;toolbar:false;"><div class="button-container">
<div class="horizontal-button" data-role="yes">Yes</div>
<div class="horizontal-button" data-role="no">いいえ、申し訳ありませんが、それはできません</div>
</div></pre>
<p>さまざまなオプションを試しましたが、うまくいきません。 </p>
<li>グリッド レイアウト Grid-template-colums: 1fr 1fr を使用する場合、必要に応じてボタンを列に積み重ねる方法が見つかりません。 </li>
<li>flex と flex:1 1 0 を使用するときに、ボタンの幅をテキストの長さに合わせる方法が見つかりません。 </li>
</ul>
<p>助けてください! </p>
<p>ありがとうございます！
ダミアン。 </p>
