html - CSS 中的对齐文本问题

Question

我正试图证明网站上的文字是合理的，但我无法以正确的方式做到这一点。

我的代码:

<ul>
    <li style="text-align: justify;">
       ::before
        <span style="font-size: 14pt;">Text text text text text Text text text text text Text text text text text</span>
        <span style="font-size: 14pt;">taming my thick tresses, making this best for touch-up work, bangs and people with thin hair.</span>
    </li>
</ul>

CSS 部分:

#inbound-list.class-SyMhZJtiLv li {
   color: #000000;
   list-style: none;
   font-weight: 500;
   font-size: 16px;
   vertical-align: top;
   margin-bottom: 10px;
}

#inbound-list.class-SyMhZJtiLv li:before {
   background: transparent;
   border-radius: 50% 50% 50% 50%;
   color: #000000;
   display: inline-block;
   font-family: 'FontAwesome';
   font-size: 18px;
   line-height: 18px;
   margin-right: 0.5em;
   margin-top: 0;
   text-align: center;
}

#inbound-list.fa-list-check li:before {
   content: "\f00c";
}

它看起来像:

我希望文本应该在红线处垂直对齐(当然，这条线在这里是为了帮助)。

我不知道该怎么做。也许您有一些想法？

Answer 1

这是你需要的吗？

li {
  list-style: none;
  font-size: 16px;
  padding-left: 30px;
  position: relative;
  text-align: justify
}
li::before {
  border-radius: 50%;
  border-style: solid;
  border-width: 1px;
  display: inline-block;
  content: "✓";
  line-height: 20px;
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
}

<ul>
  <li>
    <span>Text text text text text Text text text text text Text text text text text</span>
    <span>taming my thick tresses, making this best for touch-up work, bangs and people with thin hair.</span>
    <span>Text text text text text Text text text text text Text text text text text</span>
    <span>taming my thick tresses, making this best for touch-up work, bangs and people with thin hair.</span>
  </li>
</ul>