Je suis en train de déterminer la meilleure façon de faire 2 éléments de la même taille sur la base du texte de l'élément plus large.
En gros, prendre les 2 éléments de texte "ouverture de session" et "xyz" (utilisé pour un court mot exemple), de sorte que les deux boutons sont de la même taille et sont assez grands pour gérer la plus grande des 2 entrées de texte.
Ceci peut être fait via Javascript, Angular, que ce soit.
Vous pouvez le faire avec du CSS grilles:
.button-panel {
display: inline-grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: 10px;
}<div class="button-panel">
<button>A very long button name</button>
<button>Ok</button>
</div>Vous pouvez obtenir le bouton avec le plus grand offsetWidth, puis appliquez-les à l'autre du bouton width propriété de style.
const buttons = document.querySelectorAll('button')
if (buttons[1].offsetWidth > buttons[0].offsetWidth) {
buttons[0].style.width = buttons[1].offsetWidth + 'px';
} else {
buttons[1].style.width = buttons[0].offsetWidth + 'px';
}<button>Hello World!</button>
<button>Spectric</button>Si vous avez ultiple boutons, une solution plus évolutive:
const buttons = document.querySelectorAll('button')
const biggestWidth = [...buttons].reduce((a,b) => a = b.offsetWidth > a ? b.offsetWidth + 1 : a, 0)
buttons.forEach(e => e.style.width = biggestWidth + 'px')<button>Hello World!</button>
<button>Spectric</button>Vous pouvez définir la propriété de min-width sur le bouton de l'élément. En faisant cela, le petit bouton sera de même largeur que le plus grand.