如何在不从图标下方开始的情况下直线对齐文本? [重复]

问题描述 投票:2回答:1

这个问题在这里已有答案:

enter image description here

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

所以我的问题是下一行'但不是从图标右侧开始'应该在'我'字符下对齐,而不是在检查图标下。我该如何对齐?

html css
1个回答
2
投票

有多种方法可以做到这一点。

两个想法:

  1. 将两个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>
  1. 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>
© www.soinside.com 2019 - 2024. All rights reserved.