使用CSS在<ul> <li> </li> </ul>中对齐文本

Question

这是我的CSS：

ul.list-ok {
    list-style: none;
    margin: 0;
}

ul.list-ok li {
    margin-bottom: 8px;
    height: 18px;
    line-height: 18px;
}

.fa-angle-right:before {
  content: "\f105";
}

这是我的HTML：

<ul class="list-ok" style="margin-top: 25px !important;display:inline-block;">
<li style="height: initial;"><i class="fa fa-angle-right"></i>Streamlined processes saving you time and money. This is a very long bullet point that needs to wrap and wrap and wrap so that a very long paragraph lines up properly.</li>
<li style="height: initial;"><i class="fa fa-angle-right"></i>A+ rated with the BBB</li>
</ul>

这是我的输出：

Here是我的小提琴。

这是我的问题;）

我想要'和'这个词正确包装并与其他文本的开头对齐，我能够通过使用其他列表样式来实现，但客户端想要使用此方法。我搜索了谷歌并尝试了许多不同的技术来对齐文本，并尝试将我的文本包含在<p>和其他元素中以努力实现我想要的输出。我很茫然，似乎越来越远离答案，我遵循的更多教程和我在谷歌上找到的链接。任何帮助表示赞赏。

编辑：

我使用了属性display:inline-block;，但它在移动设备上关闭了文本，因此这不是一个选项，我需要正确包装文本。为了使问题更简单，我删除了很长的几个要点

这就是我希望成品看起来像，但使用fa-angle-right类创建的自定义项目符号点：

Answer 1

尝试white-space:nowrap Fiddle

＆＃13;

＆＃13;

ul.list-ok {
    list-style: none;
	margin: 0;
   
}

ul.list-ok li {
    margin-bottom: 8px;
    height: 18px;
    line-height: 18px;
    white-space:nowrap;
 
}

.fa-angle-right:before {
  content: "\f105";
  
}

＆＃13;

<ul class="list-ok" style="margin-top: 25px !important;display:inline-block;">
    
<li style="height: initial;"><i class="fa fa-angle-right"></i>Streamlined processes saving you time and money</li>
<li style="height: initial;"><i class="fa fa-angle-right"></i>A+ rated with the BBB</li>
    
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将li文字换成“<\span><\/span>”标签，并根据需要设置样式。 尝试修复min-width的{​​{1}}，以便在较小的屏幕中不会失真。