Eu sunt încercarea de a determina cel mai bun mod de a face 2 elemente de aceeași dimensiune pe baza textului de mai mare element.
Practic, cele 2 articole de text "ouverture de sesiune" și "xyz" (folosit pentru un scurt cuvânt de exemplu), astfel încât ambele butoane sunt de aceeași dimensiune și sunt suficient de mari pentru a ocupa cea mai mare dintre cele 2 intrări de text.
Acest lucru poate fi realizat prin intermediul Javascript, Unghiulare, orice.
Poti sa o faci cu CSS grile:
.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>Puteți obține butonul cu mai mare offsetWidth, apoi se aplică altor buton width stil de proprietate.
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>Dacă aveți ultiple, butoane, o soluție scalabilă:
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>Puteți seta proprietatea de min-lățime pe butonul element. De a face acest lucru cel mai mic buton va fi de aceeași lățime ca unul mai mare.