html - 如何定位 span 标记中的第二行文本

Question

我有一个 wordpress 主题，其列表格式如下，

<ul class="ozy-custom-list wpb_content_element ">
 <li>
  <span class="oic oic-dot" style="color:#2f75aa"></span>
  <span>Personalised Services</span>
 </li>
 <li>
  <span class="oic oic-dot" style="color:#2f75aa">
  </span><span>Complete support – from Port to Destination</span>
 </li>
</ul>

第一个跨度用于元素符号，第二个跨度包含元素符号后面的文本。

现在，对于第二个 li 元素，文本转到下一行并在元素符号下方。我想在第二行添加一些填充，这样它就不会出现在元素符号下方。

这是一张图片来展示发生了什么，

如何定位第二行(即“目的地”)？

Answer 1

您可以通过将点跨度显示为行内 block 来解决此问题。然后你可以给它一个固定宽度并以负边距移动它:

.oic-dot {
    display: inline-block;
    width: 15px;
    margin-left: -20px;
}

我让你看起来很像 demo .

您可能需要稍微调整一下宽度和边距，以根据您的网站进行调整。