CSS は他のテクニックを使わずに水平ボタンを実装します

Question

<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="horizo​​ntal-button" data-role="yes">Yes</div> <div class="horizo​​ntal-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>

Answer 1

このオプションを試してみましょう。このアプローチのどこが気に入らないですか?

リーリー リーリー

A: この場合、コンテナ/ボタンはページの幅全体を占めます...テキストの幅に合わせて調整されません。

Q: さて、それでは:

リーリー リーリー