Question

我正在创建内联LI，并希望它们的高度相似。这里的问题是，当我的一个LI有一个长文本时，这个LI会有更高的高度而其他人不会调整。（我使用bootstrap来创建我的行）

和HTML代码：

<div class="col-md-12 col-sm-12 col-xs-12 table-custom">
  <ul style="border:1px solid" class="row table-row">
    <li style="width:200px" class="table-cell">title 1</li>
    <li style="width:20%" class="table-cell">Name with very long description to create multiple lines and show what I would like to to.</li>
    <li class="table-cell">title 3</li>
    <li class="table-cell">title 4</li>
  </ul>
  <ul style="border:1px solid" class="row table-row">
    <li class="table-cell">test 1</li>
    <li class="table-cell">test 2</li>
    <li class="table-cell">test 3</li>
    <li class="table-cell">test 4</li>
  </ul>
</div>

Answer 1

一种方法是使用jQuery。

这是jsfiddle：http://jsfiddle.net/oe4g2etw/6/

以下是您需要的JS代码：

// During the first load...
// Find the max height of the elements...
var maxHeight = Math.max.apply(null, $(".table-custom li").map(function (){
    return $(this).height();
}).get());

// And set all the list elements to that max height
$(".table-custom li").css('height', maxHeight);

如果您还要使其响应，则需要添加一个检查窗口宽度更改的侦听器，然后重新计算最高元素的高度并将其设置为所有列表项：

// When the window is resized...
$( window ).resize(function() {
  // Remove the 'height' attribute...
  $(".table-custom li").css("height", "");

  // Find the max height of the elements...
  var maxHeight = Math.max.apply(null, $(".table-custom    li").map(function (){
      return $(this).height();
  }).get());

  // And set it to all the elements
  $(".table-custom li").css('height', maxHeight);
});

希望这有帮助！

PS：如果您还没有将jQuery包含在<head>中，请不要忘记。

Answer 2

您可以使用display: table-cell使元素与其最高的兄弟高度相匹配。

这应该适用于IE8 +和所有其他浏览器：

＆＃13;

.table-custom {
  min-width: 200px;
}
.table-row {
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 0px;
}
.table-custom > ul > li {
  text-align: left;
  padding: 0px;
  padding-left: 5px;
  padding-top: 8px;
  padding-bottom: 7px;
  display: table-cell;
  border: 1px solid #f00;
  margin-bottom: 0px;
}

＆＃13;

<div class="col-md-12 col-sm-12 col-xs-12 table-custom">
  <ul style="border:1px solid" class="row table-row">
    <li style="width:200px" class="table-cell">title 1</li>
    <li style="width:20%" class="table-cell">Name with very long description to create multiple lines and show what I would like to to.</li>
    <li class="table-cell">title 3</li>
    <li class="table-cell">title 4</li>
  </ul>
  <ul style="border:1px solid" class="row table-row">
    <li class="table-cell">test 1</li>
    <li class="table-cell">test 2</li>
    <li class="table-cell">test 3</li>
    <li class="table-cell">test 4</li>
  </ul>
</div>

＆＃13;

根据不同高度的LI调整LI的高度

2 个答案: