CSS implémente des boutons horizontaux sans autres techniques

Question

J'essaie de créer deux boutons horizontaux de même largeur, en fonction de la largeur du bouton le plus long.

• 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>
• 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>
• Je souhaite que les boutons apparaissent horizontalement par défaut, mais s'ils n'apparaissent pas horizontalement, empilés sous forme de colonnes. ≪/li>
• J'ai besoin que le texte du bouton soit renvoyé à la ligne si tout le texte ne rentre pas. ≪/li>

<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>

J'ai essayé différentes options... mais je n'arrive pas à le faire fonctionner !

• 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>
• 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>

Aidez-moi s'il vous plaît !

Merci beaucoup ! Damien.

Answer 1

Essayons cette option. Qu’est-ce qui vous déplaît dans cette approche ?

div {
  background-color: rgba(0, 0, 0, 0.1);
}

.button-container {
  padding: 16px;
  display: flex;
  gap: 16px;
}

.horizontal-button {
  padding: 16px;
  flex: 1;
  text-align: center;
  word-wrap: hypens;
}

@media (max-width: 360px) {
  .button-container {
    flex-direction: column;
  }
}

<div class="button-container">
  <div class="horizontal-button" data-role="yes">Yes</div>
  <div class="horizontal-button" data-role="no">No, sorry - I cannot make it</div>
</div>

A : Dans ce cas le conteneur/bouton occupe toute la largeur de la page... ils ne s'ajustent pas à la largeur du texte.

Q : D'accord, alors :

div {
  background-color: rgba(0, 0, 0, 0.1);
}

.button-container {
  margin: auto;
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  gap: 16px;
  max-width: max-content;
}

.horizontal-button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px;
  flex: 1;
  text-align: center;
  max-width: 50%;
}

@media (max-width: 360px) {
  .button-container {
    flex-direction: column;
  }
  .horizontal-button {
    hyphens: auto;
    max-width: unset;
  }
}

<div class="button-container">
  <div class="horizontal-button" data-role="yes">Yes</div>
  <div class="horizontal-button" data-role="no">No, sorry - I cannot make it</div>
</div>