Daha büyük öğenin metnine dayanarak 2 öğeyi aynı boyutta yapmanın en iyi yolunu belirlemeye çalışıyorum.
Temel olarak 2 metin öğesini "ouverture de session" ve "xyz" yi (kısa bir kelime örneği için kullanılır) alın, böylece her iki düğme de aynı boyuttadır ve 2 metin girişinden daha büyük olanı işlemek için yeterince büyüktür.
Bu, Javascript, Açısal, her neyse yapılabilir.
Bunu CSS ızgaralarıyla yapabilirsiniz:
.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>Büyük düğme alabilirsiniz offsetWidth, sonra bunu diğer düğmelere uygulayın width stil özelliği.
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>Birden fazla düğmeniz varsa, daha ölçeklenebilir bir çözüm:
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>Düğme öğesine min-width özelliğini açık olarak ayarlayabilirsiniz. Bunu yaparak, daha küçük düğme daha büyük olanla aynı genişlikte olacaktır.