सेटिंग की चौड़ाई 2 तत्वों के आधार पर सबसे लंबे समय तक पाठ

0

सवाल

मैं कोशिश कर रहा हूँ करने के लिए सबसे अच्छा तरीका निर्धारित करने के लिए बनाने के लिए 2 तत्व एक ही आकार के आधार पर पाठ बड़ा तत्व है ।

German Text - same size

French Text example 2 different sizes

मूल रूप से लेने के 2 पाठ आइटम "ouverture दे सत्र" और "xyz" (इस्तेमाल के लिए एक छोटी शब्द के उदाहरण के लिए) तो यह है कि दोनों बटन एक ही आकार के होते हैं और बड़े संभाल करने के लिए काफी बड़ा के 2 पाठ आदानों.

यह किया जा सकता है जावास्क्रिप्ट के माध्यम से, कोणीय, जो भी हो.

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

सबसे अच्छा जवाब

1

आप यह कर सकते हैं सीएसएस के साथ ग्रिड:

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

यदि आप ultiple बटन, एक और अधिक स्केलेबल समाधान:

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

इस श्रेणी में लोकप्रिय

लोकप्रिय सवाल इस श्रेणी में