html - 对齐文本和图标 CSS

Question

我正在尝试制作一个带有图标的列表。我想对齐我的文字。这是一个jsfiddle显示我的问题:

<ul>
 <li><i class="fa fa-phone"></i>lorem ipsum test<br>TEST<br></li>
 <li><i class="fa fa-phone"></i>00 00 00 00 00</li>             
</ul>

TEST 在图标下面，但我想把它放在文本下面。我尝试使用 display:table-cell 但没有成功。我忘了说明:内容是动态生成的(使用 tinyMCE)。所以用户不能在文本中放入 HTML 元素(我不想)。我需要编写 CSS 规则来自动对齐文本(就像在单元格中一样)。

你有什么想法吗？

谢谢!

Answer 1

也许是这样

ul{
    list-style:none;
}
ul li{
    position: relative;
    padding-left: 20px;
}
ul li i{
    position: absolute; top: 0; left: 0;
}

<link href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/>
<ul>
    <li><i class="fa fa-phone"></i>lorem ipsum test<br/>TEST<br/></li>
 <li><i class="fa fa-phone"></i>00 00 00 00 00</li>             
</ul>