如何将最长元素的宽度分配给其他元素

Question

我有以下元素

运动名称是动态的，因此包含运动名称的按钮的宽度会有所不同，但随附的颜色按钮是固定宽度。父元素具有width: auto; height: auto，无论锻炼名称有多长，它都适合于许多按钮。

如何使所有按钮的长度等于最宽的练习名称按钮的宽度？

或类似地，即使选择了更长的运动名称，如何让这些按钮对齐但不会溢出。

Answer 1

如果您只在CSS中寻找解决方案，可以使用display属性table，table-row和table-cell。我认为你可以为你的标记扩展它：

.btn-container {
  display: table;
  border: 1px #000 solid !important;
}
.btn {
  display: table-row;
}
.btn-text {
  display: table-cell;
  padding: 3px;
}
.btn-label {
  width: 30px;
  display: table-cell;
}
.btn-label-red {
    background: #F00;
}
.btn-label-green {
    background: #0F0;
}
.btn-label-blue {
    background: #00F;
}

<div class="btn-container">

  <div class="btn">
    <span class="btn-text">Button 1</span>
    <span class="btn-label btn-label-green"> </span>
  </div>
  <div class="btn">
    <span class="btn-text">Button 2 with large text</span>
    <span class="btn-label btn-label-red"> </span>
  </div>
  <div class="btn">
    <span class="btn-text">Btn 3</span>
    <span class="btn-label btn-label-blue"> </span>
  </div>
</div>

Answer 2

声明一个maxwidth变量设置为0，然后使用jquery选择器拉出按钮，并且如果它是更新maxwidth变量，则检查每个按钮是否检查宽度是否大于max。最后，在遍历所有按钮后，使用相同的选择器设置所有按钮的宽度。

Answer 3

如果没有看到您的代码，我无法给您一个确切的答案，但有几种方法可以做到这一点。第一种方法是使用CSS calc函数将按钮左侧的宽度设置为100％减去按钮右侧的宽度：

.button-left {
    width:calc(100% - 40px); /* Change 40px to whatever the width of the right side is */
}

另一方面，正如@SumGuy所提到的那样，将使用jQuery将所有元素的宽度设置为所有按钮的最大宽度。您可以通过循环遍历每个元素来实现：

function equalWidth(element) {
    var maxWidth = 0;
    element.each(function() {
        $(this).removeAttr('style');
        maxWidth = Math.max(maxWidth, $(this).width());
    });
    group.css({ width: maxWidth + 'px' });
}
equalWidth($('.button')); //Change the selector to whatever your button class is.

如果你设置了一个JSFiddle，我可以给你一个适用于你的特定HTML标记的确切答案。