html - 如何在不从图标下方开始的情况下将文本对齐在自身下方?
问题描述
<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>
推荐阅读
- android - textView.setText(string) 和 textView.text = $string 有什么区别
- chocolatey - 依赖包的 Chocolatey 参数
- php - 将 Url 子域重定向到子目录
- javascript - 使用 Js 自动将文本从谷歌控制台添加到 textarea
- javascript - 如果元素句柄被传递并且上下文被破坏,waitForFunction 将失败
- qt - QML Swipeview没有动画
- mysql - DB_URL 必须在 docker 和 spring boot 配置中是什么?
- visual-studio-code - 将 jar 添加到 vscode 调试扩展
- r - 专有系统和银行之间的 RSI(使用 TTR)结果不同
- azure - 无法使用 Rest API 将 Windows 节点拉入集群