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

在带有缩进(树数据)的表中，我需要将第二行与第一行对齐。

注意，文本“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>

最佳答案

你可以用 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>

关于html - 如何在图标后对齐多行文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34820524/