垂直algin：LI Node中顶部不同类型的标记

Question

我是动态创建可折叠的树型UL列表。 Li节点的高度是动态变化的。

<ul class="tree">
    <li> Item 1. <svg>some tags</svg><button1><button2></li>
    <li> Item 2. <svg>some tags</svg><button1><button2></li>
    <li> Item 3. <svg>some tags</svg><button1><button2>
         <ul>
             .  . . .similar li code
         </ul>
    </li>
</ul>

svg的高度可能会随着时间的推移而变化。

我的目标是将文本，svg和按钮垂直对齐到顶部。

我尝试了以下技巧

1. 使用css height:Xpx;和height:Xpx;将其设置为相等的值
2. 将父ul节点display:table属性和相应的子li节点更改为display:table-cell或display:table-row;。

我的观点目前看起来像这样 -



图片展示了如何错过对齐的东西。我的目标是垂直对齐顶部。

Answer 1

我不确定我是否理解你，但请看一下： https://jsfiddle.net/houxco2k/

我认为它会做的事情：

li{
    display: table-cell;
    position: relative;
    float: left;
    width: 100%;
    list-style: none;


}
li svg{
    display: table-cell;
    vertical-align: middle;

}