如何定位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元素的情况下，文本转到下一行并在项目符号下方。我想在第二行添加一些填充，因此它不会在子弹下面做。

这是一张显示最新情况的图片，

我如何定位第二行（即＆＃34;目的地＆＃34;）？

Answer 1

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

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

我让你看起来像demo。

您可能需要使用宽度和边距来调整它以适应您的网站。

Answer 2

如果您想选择第二行，您可以使用以下内容：

li+li span+span:first-line{
  color: black;
}
li+li span+span{ /*second line*/
  display: block;
  float: left;
  color: red;
}

JSFiddle：https://jsfiddle.net/ws5rk0sx/

如果你只需要对齐所有行，只需使用：

li+li span+span{
  display: block;
  float: left;
}

Answer 3

你想要＆＃34;文本缩进＆＃34; css属性：

li span {
     padding-left: 1.5em;
     text-indent:-1.5em;
}

Text-indent缩进第一行，因此我们将其向后推，但只有在我们将整个文本推到右侧之后。

Answer 4

是的，您可以使用以下内容：

li:last-child > span:last-child {
    ...
}

然而，给你的ul一个id是有帮助的，所以你可以使用：

#ulid > li:last-child > span:last-child {
    ...
}

不要弄乱页面上的任何其他UL。如果它不是ul中的最后一个li，你可以使用第n个类型而不是last-child作为li标签^^

Answer 5

我创建了一个JsFiddle here

我已将以下css应用于范围：

.text-span{
    display:block;
    margin-left:5px;
}

如果您不想在元素上设置类，也可以使用：

ul > li span:nth-of-type(2){
    display:block;
    margin-left:5px;
}

Answer 6

你可以简单地使用没有边框的表;） 第一个colm包含子弹，第二个colm包含信息...