Question

假设我在一个具有<h4>属性的网页中有6个width:fit-content标签。

现在，由于所有这些<h4>标签的内容都不同，因此它们的宽度也不同。我想将所有<h4>标签的宽度固定为一种尺寸，该尺寸等于所有这些标签中内容的最大宽度。

h4{
margin:2px 0;
padding:0;
background: red;
border: 1px solid black;
}

<div class="test">
  <h4>Lalilu</h4>
  <h4>Nur der Mann im Mond</h4>
  <h4>schaut mir beim</h4>
  <h4>Editieren zu!</h4>
  <h4>Mist! Jetzt weiß ich nicht</h4>
  <h4>mehr wie das Lied ging...</h4>
</div>

Answer 1

您可以通过以下步骤获得最大的h4宽度：

使用map将所有h4宽度值收集到一个数组中。
通过在该阵列（read more about it）上运行Math.max.apply获得最大值。

const allWidth = $('h4').map((index, elm) => elm.clientWidth).get();
const maxWidth = Math.max.apply(null, allWidth);

console.log(maxWidth);

h4 {
  background: pink;
  width: fit-content;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>h4 headline</h4>
<h4>h4 headline h4 headline</h4>
<h4>h4 headline h4 headline h4 headline</h4>
<h4>h4 headline h4 headline h4 headline h4 headline</h4>

如果我已将宽度指定为适合内容，如何在页面中的所有h4标签中找到h4标签的最大宽度？

1 个答案: