CSS implémente des boutons horizontaux sans autres techniques
<p>J'essaie de créer deux boutons horizontaux de même largeur, en fonction de la largeur du bouton le plus long. </p>
<ul>
<li>Le contenu du texte de chaque bouton peut être ajusté par l'utilisateur sur une page séparée... je n'ai donc aucun contrôle sur la longueur du texte/la longueur du texte du premier bouton et du deuxième bouton. ≪/li>
<li>Je souhaite que le bouton s'adapte à la longueur du texte le plus long, mais ne dépasse pas la largeur de la page (comme sur les appareils mobiles). ≪/li>
<li>Je souhaite que les boutons apparaissent horizontalement par défaut, mais s'ils n'apparaissent pas horizontalement, empilés sous forme de colonnes. ≪/li>
<li>J'ai besoin que le texte du bouton soit renvoyé à la ligne si tout le texte ne rentre pas. ≪/li>
</ul>
<pre class="brush:php;toolbar:false;"><div class="button-container">
<div class="bouton-horizontal" data-role="oui">Oui</div>
<div class="horizontal-button" data-role="no">Non, désolé, je ne peux pas faire ça</div>
</div></pre>
<p>J'ai essayé différentes options... mais je n'arrive pas à le faire fonctionner ! </p>
<ul>
<li>Lorsque j'utilise la disposition en grille grid-template-colums: 1fr 1fr, je ne trouve pas de moyen d'empiler les boutons en colonnes lorsque cela est nécessaire. ≪/li>
<li>Je ne trouve pas de moyen d'adapter la largeur du bouton à la longueur du texte lorsque j'utilise flex et flex:1 1 0. ≪/li>
</ul>
<p> Aidez-moi s'il vous plaît ! </p>
<p>Merci beaucoup !
Damien. </p>
