javascript - 在重新加载动态内容后统一调整一组按钮的大小

Question

我遇到了关于优雅地调整网页上一组按钮的大小的问题。我的问题详细:我有一组按钮，它们是无序列表的一部分。例如:

<div id="button-set-1" height="some fixed no" width="inherited from parent">
  <ul>
    <li id="list_item_0">
      <button id="button_0">
       <div class="inner_left_div">
       </div>
       <div class="inner_right_div">
       </div>
      </button>
    </li>
    <li id="list_item_1">
      <button id="button_1">
      <div class="inner_left_div">
      </div>
      <div class="inner_right_div">
      </div>
      </button>
    </li>
    <li id="list_item_2">
      <button id="button_2">
      <div class="inner_left_div">
      </div>
      <div class="inner_right_div">
      </div>
      </button>
    </li>
  </ul>
</div>

现在的问题是每个按钮中的右侧 div 都有动态内容，从 AJAX 获取并根据某些用户操作进行更新。从 AJAX 获取的内容在按钮上的长度是可变的。我想保持最终所有按钮在加载内容后具有相同的高度和宽度。我尝试确定最大高度和宽度，然后使用 jQuery 进行设置。但它非常麻烦和紧张，因为在某些情况下按钮的数量非常多，并且需要多次 AJAX 调用来获取所有按钮的内容。然后我必须在每批之后调整大小。有人可以建议一种巧妙的方法来做到这一点，这对用户来说不会太明显并且不会降低网页的用户体验。我应该使用动画来调整它的大小吗？

Answer 1

可以通过css指定按钮内内容的高度。

CSS

[id^="list_item"] button div{ 
width: 400px; height: 300px;
}

此选择器将选择列表项内按钮下的所有 div 元素。