html - 如何在图标后对齐多行文本

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>