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

也许是这样

＆＃13;

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

＆＃13;

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

＆＃13;

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 Demo

<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

请尝试以下操作： Demo

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;

对齐文本和图标CSS

7 个答案: