<td>
<span className="support-matrix-page-check-icon" />
<span className="support-matrix-page-p-small"> I want this text to be on next line but not start from right under icon </span>
</td>
所以我的问题是下一行“但不是从图标下方开始”应该在“I”字符下对齐,而不是在复选图标下对齐。我该如何对齐它?
最佳答案
有多种方法可以做到这一点。
两个想法:
- 将两个
span
放入position: flex
的容器内。
.container {
display: flex;
/* Just for the demo */
width: 200px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<span class="icon">
<i class="fa fa-stack-overflow" aria-hidden="true"></i>
</span>
<span class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
- 将两个
span
放入具有position:relative
的容器中,将position:absolute
添加到图标,并添加padding- left
到容器,将文本推到右侧。
.container {
position: relative;
padding-left: 25px;
/* Just for the demo */
width: 200px;
}
.icon {
position: absolute;
left: 0;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<span class="icon">
<i class="fa fa-stack-overflow" aria-hidden="true"></i>
</span>
<span class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
关于html - 如何在不从图标下方开始的情况下将文本在其下方直线对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55188371/