如何在图标后对齐多行文字

Question

在具有缩进(树数据)的表中,我需要将第二行与第一行对齐.

注意,文字"Tail"与"Long"不对齐

这里创建了一个类似的例子

div{
  width:400px;
}

<div>
  <a href="">ICon:</a>
  <span>This is my fight song. Take back my life song. Prove I'm alright song. My power's turned on
Starting right now I'll be strong</span>    
</div>

Answer 1

你可以用display: table;和做display: table-cell;

div{
  width:400px;
  border: 1px solid black;
  display: table;
  padding: 10px;
}

a, span {
  display: table-cell;
  vertical-align: top;
}

<div>
  <a href="">ICon:</a>
  <span>This is my fight song. Take back my life song. Prove I'm alright song. My power's turned on
Starting right now I'll be strong</span>    
</div>