<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>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
このオプションを試してみましょう。このアプローチのどこが気に入らないですか?
A: この場合、コンテナ/ボタンはページの幅全体を占めます...テキストの幅に合わせて調整されません。
Q: さて、それでは: