根据最长文本设置2个元素的宽度

Question

我正在尝试根据较大元素的文本确定使 2 个元素大小相同的最佳方法。

基本上采用 2 个文本项“ouverture de session”和“xyz”（用于简短的单词示例），以便两个按钮大小相同，并且足够大以处理 2 个文本输入中较大的一个。

这可以通过 Javascript、Angular 等来完成。

Answer 1

您可以将 min-width 的属性设置为按钮元素。 通过这样做，较小的按钮将与较大的按钮具有相同的宽度。

Answer 2

您可以获得具有较大offsetWidth的按钮，然后将其应用于另一个按钮的width样式属性。

 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>

如果您有多个按钮，则更可扩展的解决方案：

 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>

Answer 3

您可以使用 CSS 网格来做到这一点：

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