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";
}

看起来像：

我希望thext应该在红线上进行verticaly alligned（cource这行是为了帮助）。

我不再有想法如何去做。也许你有一些想法吗？

Answer 1

这是你需要的吗？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试吧

li {
    text-align: justify;
    text-justify: inter-word;
}

或

#justify p:after {
  content: "";
  display: inline-block;
  width: 100%;
}

Answer 3

只需将display: block;添加到:: before元素即可。这会使文本尊重垂直线。

Answer 4

text-align属性是您希望显示文字的方式，而padding则是在顶部和底部5px以及10px左侧和ul li{ padding: 5px 10px; } ul{ text-align: justify; } 之间留出额外空格对。请在 CSS 的下半部分尝试此操作：

{{1}}