是否可以在每个内联<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: '|';
}
}
}
编辑:我认为没有人理解......我想要的是删除每行开头或结尾的每个分隔符,我不知道如何写得更清楚。
因此结果将如下所示
答案 0 :(得分:1)
使用li:last-child
选择器,例如:
li:last-child:after {
content: '';
}
请查看下面的代码段,或Codepen(使用SCSS)。
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;
希望这有帮助!
答案 1 :(得分:1)
您可以使用not()
伪类并选择除最后一个之外的所有li
元素。
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;
答案 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: '';
}
}
}