Question

我有一个带有 n 列表元素的无序列表。元素的高度由其内容决定。一次只显示一个元素;其余的都用CSS隐藏（显示：无）。

我希望UL元素在隐藏最高元素时保持其高度。我有什么想法可以做到这一点？

示例：

UL高度200px：

<ul>
   <li>Nulla sed egestas ante. Integer aliquet lectus ac felis euismod ultrices. Praesent magna libero, vestibulum nec tincidunt ac, lacinia et nibh. Pellentesque laoreet, turpis sed consectetur ullamcorper, dolor turpis mollis nulla, at finibus nibh magna vitae velit.</li>
   <li style="display:none">dolor turpis mollis nulla, at finibus nibh magna vitae velit.</li>
   <li style="display:none">Aliquet lectus dolor turpis mollis nulla, at finibus nibh magna vitae velit.</li>
</ul>

UL高度100px：

<ul>
   <li style="display:none">Nulla sed egestas ante. Integer aliquet lectus ac felis euismod ultrices. Praesent magna libero, vestibulum nec tincidunt ac, lacinia et nibh. Pellentesque laoreet, turpis sed consectetur ullamcorper, dolor turpis mollis nulla, at finibus nibh magna vitae velit.</li>
   <li>dolor turpis mollis nulla, at finibus nibh magna vitae velit.</li>
   <li style="display:none">Aliquet lectus dolor turpis mollis nulla, at finibus nibh magna vitae velit.</li>
</ul>

我很想看到这个问题的CSS解决方案！

修改

正如你们中的一些人可能已经意识到的那样，该列表被用作幻灯片。我使用jQuery hide / show在元素之间切换。不幸的是，列表＆＃34;跳跃＆＃34;每次过渡，特别是两个不匹配高度的元素之间。

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  background: blue;
  width: 100%;
}

修改2

我已经提出了解决问题的脚本解决方案。我对它并不完全满意。

＆＃13;

var i = 0; 

window.setInterval(function () {
  $('ul').css({marginLeft: -300 * i});
  i += 1;
  if ( i > $('ul li').length) {
    i = 0;
    }
  }, 1000);

＆＃13;

div {
  overflow: hidden;
  width: 300px;
  border: 1px solid red;
  }

ul {
  list-style: none;
  padding: 0;
  width: 900px;  
  margin-left: 0;
}

li {
  float: left;
  width: 300px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul>
       <li>Nulla sed egestas ante. Integer aliquet lectus ac felis euismod ultrices. Praesent magna libero, vestibulum nec tincidunt ac, lacinia et nibh. Pellentesque laoreet, turpis sed consectetur ullamcorper, dolor turpis mollis nulla, at finibus nibh magna vitae velit.</li>
       <li>dolor turpis mollis nulla, at finibus nibh magna vitae velit.</li>
       <li>Aliquet lectus dolor turpis mollis nulla, at finibus nibh magna vitae velit.</li>
    </ul>
  </div>

＆＃13;

Answer 1

浏览器无法知道最大高度项目的高度，如果他在开始时隐藏，你应该在这里使用js脚本检测并保留更大的项目，如：

$(function(){
  var hUl = 0;
  $('li').each( function(k, li){
    var isVisible = $(li).is(':visible');
    if(!isVisible) {$(li).show();}
    hUl =($(li).height() > hUl) ? $(li).height() : hUl;
    $('ul').height(hUl);
    if(!isVisible) {$(li).hide();}
  });
});

ul {
  width: 200px;
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
   <li style="display:none;">Nulla sed egestas ante. Integer aliquet lectus ac felis euismod ultrices. Praesent magna libero, vestibulum nec tincidunt ac, lacinia et nibh. Pellentesque laoreet, turpis sed consectetur ullamcorper, dolor turpis mollis nulla, at finibus nibh magna vitae velit.</li>
   <li>dolor turpis mollis nulla, at finibus nibh magna vitae velit.</li>
   <li style="display:none;">Aliquet lectus dolor turpis mollis nulla, at finibus nibh magna vitae velit.</li>
</ul>

Answer 2

我们决定使用自己的解决方案，但用百分比代替。然后，您需要的唯一一点是分配左边距的位，以及列表元素的百分比宽度（100 / n ）。

最高元素后的尺寸列表

2 个答案: