设置宽2素基础上最长的文本

0

的问题

我试图确定最好的方式,使2素尺寸相同的基于文本的更大的元素。

German Text - same size

French Text example 2 different sizes

基本上采取的2文项目"曲de届会议"和"xyz"(使用一个短字示例),以便这两个按钮都是同样大小和较大,足以处理较大的案文2的投入。

这可以通过Javascript,角度,无论。

angular javascript typescript
2021-11-24 00:36:42
3

最好的答案

1

你可以做到这一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>

2021-11-24 04:42:36
1

你可以获得的按钮用大 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>

2021-11-24 00:56:39
0

你可以设定财产的分宽上的按钮元。 通过这样的小按钮将是相同的宽度作为较大的一个。

2021-11-24 00:50:55

其他语言

此页面有其他语言版本

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................