html - UL LI列表的相对高度

Question

我有 Ul LI 列表

我的列表是动态的，我无法为 child 设置固定高度。

我需要按百分比控制我的 Li [ul 的 child ] 的高度来创建 Accordion 或类似的东西。

ul {
    position:reletive
}
li 

{
    display:block;
    margin:20px;
    position:reletive;
    overflow:hidden
}

<ul style="">
    <li style="height:50%">
        asdasdasd <br>
        asdasdasd <br>
        asdasdasd <br>
        asdasdasd <br>
        asdasdasd <br>
        asdasdasd <br>
        asdasdasd <br>
        asdasdasd <br>
        asdasdasd <br>
    </li>
      <li style="">
        bcvbcvbcv
    </li>
      <li style="">
        asdasdasd
    </li>
      <li style="">
        asdasdasd
    </li>
    
</ul>

为什么百分比高度对动态高度不起作用..

Answer 1

因为 li 的高度在您的情况下是什么的 50%？ 为什么要把ul的位置设置为relative？

你需要给li设置一个默认高度，jsfiddle上的一个例子

ul {

}

li {
    margin:20px;
    position:reletive;
    overflow: hidden;
    height: 30px;
}

如果你需要 Accordion 之类的东西，你可以给你的li一个默认高度，然后在某些事件发生时将它调整为height: auto，比如点击javascript，或者只是悬停在css上:

li:hover {
    cursor: pointer;
    height: auto;
}

JSFiddle Accordion 之类的例子