UL LI列表的相对高度

Question

我有Ul LI名单

我的列表是动态的，我无法在儿童身上设置固定高度。

我需要控制我的李[ul的孩子]的百分比来制作手风琴或类似的东西。

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

因为李的高度将在你的情况下50％的是什么？ 为什么你把ul的位置设置为相对？

您需要为li设置默认高度，jsfiddle

上的示例

ul {

}

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

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

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

手风琴如

JSFiddle