Question

目前我正在生成这样的列表：

    <ul class='peerslistContentwithoutborderall' id="selectedPeerList">
    <li class="col col-90 togglepeerborderselectedall" style='float:left;' id="peerSelectList" ng-repeat="peers in data.selectedCompany" >
        <div id="{{index}}" ng-click="togglePeers(peers,peers.companyId,peers.companyName)" class="peersselectedclass peerslistContentdivtext">{{peers.companyName}}</div>
    </li></ul>

并且使用css我设置了边框，宽度和其他属性，以便列表在每行中有4个元素，高度为44px。

问题是如果我有一个更大的文本，那么该元素的高度就会下降。在jquery或css中是否有任何解决方案，以便在生成列表后，行中的list元素占用最大高度元素的高度？

Answer 1

逻辑上的答案是使用CSS表（而不是实际表）。

如下：

ul {
  list-style-type: none;
  display: table;
  text-align: center;
  width: 80%;
  margin: auto;
}
li {
  display: table-cell;
  border: 1px solid grey;
  vertical-align: middle;
  padding: 4px
}

<ul>
  <li>
    <div>Lorem ipsum dolor.</div>
  </li>
  <li>
    <div>Lorem ipsum dolor sit amet.</div>
  </li>
  <li>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi veniam!</div>
  </li>
  <li>
    <div>lorem</div>
  </li>
</ul>

<li>列表在4行中具有相同的高度，最大li的常量高度？</li>

1 个答案: