在每个内联li之间放置分隔符,但不在边缘

时间:2016-12-15 16:20:18

标签: javascript jquery html css

是否可以在每个内联<li>之间放置分隔符,但是它只出现在行中的每个项目之间,而不是在行的开头或结尾? 如果用CSS无法完成,那么可以用JavaScript / jQuery解决它吗?

http://codepen.io/anon/pen/Pbxddo

<ul>
  <li>Something</li>
  <li>Something</li>
  <li>Something</li>
  <li>Something</li>
</ul>

ul {
  list-style-type: none;
  padding: 10px;
  li {
    display: inline;
    &:after {
    padding-left: 5px;
      content: '|';
    }
  }
}

编辑:我认为没有人理解......我想要的是删除每行开头或结尾的每个分隔符,我不知道如何写得更清楚。

在此图像中,应删除此分隔符 enter image description here

因此结果将如下所示

enter image description here

4 个答案:

答案 0 :(得分:1)

使用li:last-child选择器,例如:

li:last-child:after {
  content: '';
}

请查看下面的代码段,或Codepen(使用SCSS)。

&#13;
&#13;
div {
  border: 3px solid #333;
  width: 300px;
  margin: auto;
}

ul {
  list-style-type: none;
  padding: 10px;
}
ul li {
  display: inline;
  font-size: 20px;
}
ul li:after {
  padding-left: 5px;
  content: '|';
}
ul li:last-child:after {
  content: '';
}
&#13;
<div>
<ul>
  <li>Something</li>
  <li>Something else</li>
  <li>Bananas, apples </li>
  <li>Tea and cookies</li>
  <li>Football or soccer</li>
  <li>sky, earth, trees, nature</li>
  <li>Furniture, painting, closet, bed, carpet</li>
  <li>window, clothes, light, door</li>
  <li>Something else in the room</li>
  </ul>
</div>
&#13;
&#13;
&#13;

希望这有帮助!

答案 1 :(得分:1)

您可以使用not()伪类并选择除最后一个之外的所有li元素。

&#13;
&#13;
ul {
  display: flex;
  padding: 0;
  list-style-type: none;
}
li:not(:last-child):after {
  content: '|';
  padding: 0 10px;
}
&#13;
<ul>
  <li>Something</li>
  <li>Something</li>
  <li>Something</li>
  <li>Something</li>
</ul>
&#13;
&#13;
&#13;

答案 2 :(得分:1)

这是一种与所有(正确的):最后一个孩子的答案不同的方法。

使用adjacent sibling selector+。这会选择紧跟li之后的第二个li。在您的上下文中,这将选择除第一个li元素之外的所有元素:

ul {
  list-style-type: none;
  padding: 10px;
  li {
    display: inline;
  }
  li + li {
    &:before {
    padding-right: 5px;
      content: '|';
    }
  }
}

这是一个展示你的例子的工作片段:

div {
  border: 3px solid #333;
  width: 300px;
  margin: auto;
}

ul {
  list-style-type: none;
  padding: 10px;
}
ul li {
  display: inline;
  font-size: 20px;
}
ul li + li:before {
  padding-right: 5px;
  content: '|';
}
<div>
<ul>
  <li>Something</li>
  <li>Something else</li>
  <li>Bananas, apples </li>
  <li>Tea and cookies</li>
  <li>Football or soccer</li>
  <li>sky, earth, trees, nature</li>
  <li>Furniture, painting, closet, bed, carpet</li>
  <li>window, clothes, light, door</li>
  <li>Something else in the room</li>
  </ul>
</div>

就个人而言,我更喜欢这种方法,因为它不那么详细,也不需要“覆盖”。

答案 3 :(得分:0)

您可以将css更改为:

ul {
  list-style-type: none;
  padding: 10px;
  li {
    display: inline;
    font-size: 20px;
    &:after {
    padding-left: 5px;
      content: '|';
    }
  }
  li:last-child {
    display: inline;
    font-size: 20px;
    &:after {
    padding-left: 5px;
      content: '';
    }
  }
}