我试图确定最好的方式,使2素尺寸相同的基于文本的更大的元素。
基本上采取的2文项目"曲de届会议"和"xyz"(使用一个短字示例),以便这两个按钮都是同样大小和较大,足以处理较大的案文2的投入。
这可以通过Javascript,角度,无论。
你可以做到这一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>
你可以获得的按钮用大 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>
你可以设定财产的分宽上的按钮元。 通过这样的小按钮将是相同的宽度作为较大的一个。