对齐文字和图标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> 

Answer 2

<ul>
    <li>
    <i class="fa fa-phone"></i>
        lorem ipsum test<br><span style="padding-left:18px"></span>TEST<br></li>
    <li><i class="fa fa-phone"></i>00 00 00 00 00</li>              
</ul>

这个？

Answer 3

我对此有解决方案。

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

CSS：

.new-line {
    display: inline-block;
}

Answer 4

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

在CSS中

div {
    margin-left:15px;
}

Answer 5

使用此html和CSS 演示

<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>

ul{
    list-style:none;
}
ul li  {
padding-left:25px;
}
ul li i{
margin-left:-13px;
}

Answer 6

尝试这样： 演示

HTML：

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

CSS：

li {
    position: relative;
    padding: 0 0 0 18px;
}
li:before {
    content:'\f03e';
    position: absolute;
    left: 0px;
    font-family:'icons';
}

并尝试保留字体目录路径并使用适当的路径。

Answer 7

您可以通过以下方式获得结果

Position: relative;