如何定位 span 标记内的第二行文本

Question

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

\n\n

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

\n\n

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

\n\n

现在，在第二个 li 元素的情况下，文本将转到下一行并位于项目符号下方。我想在第二行添加一些填充，这样它就不会在项目符号下方起作用。

\n\n

这是一张显示正在发生的事情的图片，

\n\n

\n\n

我如何定位第二行（即“目的地”）？

\n

Answer 1

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

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

我给你做了这个相似的演示。

您可能需要稍微调整一下宽度和边距，以将其调整为适合您的网站。