在无序列表中的项目之后添加pipe道分隔符，除非该项目是最后一行
是否可以风格这个HTML …
<ul> <li>Dogs</li> <li>Cats</li> <li>Lions</li> <li>Tigers</li> <li>Zebras</li> <li>Giraffes</li> <li>Bears</li> <li>Hippopotamuses</li> <li>Antelopes</li> <li>Unicorns</li> <li>Seagulls</li> </ul> … 喜欢这个 …
…没有添加类到特定的列表项，或诉诸JavaScript？ 如果是的话如何？
换行不固定; 该列表扩大占用额外空间，列表项目居中alignment。
现在可以使用flex-box
这项技术的关键：
- 设置为
overflow: hidden容器元素overflow: hidden。 - 在
ul（这是一个弹性框）上设置justify-content: space-between来强制它的flex-items伸展到左边和右边。 - 在
ul上设置margin-left: -1px使其左边缘溢出容器。 - 在
liflex-items上设置border-left: 1px。
容器作为一个面具隐藏任何弹性项目的边界接触其左边缘。
.flex-list { position: relative; margin: 1em; overflow: hidden; } .flex-list ul { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin-left: -1px; } .flex-list li { flex-grow: 1; flex-basis: auto; margin: .25em 0; padding: 0 1em; text-align: center; border-left: 1px solid #ccc; background-color: #fff; }
<link href="ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet"/> <div class="flex-list"> <ul> <li>Dogs</li> <li>Cats</li> <li>Lions</li> <li>Tigers</li> <li>Zebras</li> <li>Giraffes</li> <li>Bears</li> <li>Hippopotamuses</li> <li>Antelopes</li> <li>Unicorns</li> <li>Seagulls</li> </ul> </div>
只是
li + li::before { content: " | "; }
当然，这实际上并不能解决OP的问题。 他希望在行首和行尾取消竖条，这取决于它们在哪里被破坏。 我会断断续续地断言这个问题是不能用CSS解决的，甚至不能用JS解决，除非你想基本上重写浏览器引擎的文本测量/布局/换行逻辑。
就我所知，唯一能够“断断续续”的CSS片断首先是::first-line伪元素，这对我们来说并没有什么帮助 – 无论如何，它只限于一个几乎没有performance性的属性，并且不能像::之前和::之类的东西一起工作。 CSS的唯一其他方面我可以想到，在一定程度上暴露出破解是断字。 然而，连字符是在某些情况下添加一个字符（通常是破折号）到行尾，而在这里我们关心删除一个字符（垂直线），所以我不知道如何应用任何types与连字符相关的逻辑，甚至在诸如hyphenate-character的属性的帮助下。
我们有word-spacing属性，它应用在行内而不是行开始和结尾，这看起来很有希望，但它定义了单词之间的空间宽度，而不是要使用的字符。
人们想知道是否有一些方法可以使用text-overflow属性，这个属性有一个鲜为人知的能力，即在左边和右边显示溢出文本的两个值，如
text-overflow: '' '';
但在这里从A到B似乎还没有任何明显的方法。
在展示代码之前，值得一提的是IE8支持:first-child而不是:last-child ，所以在类似的情况下，你应该使用:first-child伪类。
演示
#menu{ list-style: none; } #menu li{ display: inline; padding: 0 10px; border-left: solid 1px black; } #menu li:first-child{ border-left: none; }
<ul id="menu"> <li>Dogs</li> <li>Cats</li> <li>Lions</li> <li>More animals</li> </ul>
使用:after伪select器之后。 看http://jsfiddle.net/A52T8/1/
<ul> <li>Dogs</li> <li>Cats</li> <li>Lions</li> <li>Tigers</li> <li>Zebras</li> <li>Giraffes</li> <li>Bears</li> <li>Hippopotamuses</li> <li>Antelopes</li> <li>Unicorns</li> <li>Seagulls</li> </ul> ul li { float: left; } ul li:after { content: "|"; padding: 0 .5em; }
编辑：
jQuery解决scheme：
HTML：
<div> <ul id="animals"> <li>Dogs</li> <li>Cats</li> <li>Lions</li> <li>Tigers</li> <li>Zebras</li> <li>Giraffes</li> <li>Bears</li> <li>Hippopotamuses</li> <li>Antelopes</li> <li>Unicorns</li> <li>Seagulls</li> <li>Monkey</li> <li>Hedgehog</li> <li>Chicken</li> <li>Rabbit</li> <li>Gorilla</li> </ul> </div>
CSS：
div { width: 300px; } ul li { float: left; border-right: 1px solid black; padding: 0 .5em; } ul li:last-child { border: 0; }
jQuery的
var maxWidth = 300, // Your div max-width totalWidth = 0; $('#animals li').each(function(){ var currentWidth = $(this).outerWidth(), nextWidth = $(this).next().outerWidth(); totalWidth += currentWidth; if ( (totalWidth + nextWidth) > maxWidth ) { $(this).css('border', 'none'); totalWidth = 0; } });
看看这里。 我还加了几个动物。 http://jsfiddle.net/A52T8/10/
一种解决方法是像左图那样设置左边框的样式：
li { display: inline; } li + li { border-left: 1px solid; margin-left:.5em; padding-left:.5em; }
然而，如果整个列表包装，这可能不会给你想要的结果，就像你的例子。 即它会给一些像：
foo | bar | baz | bob | bill | judy
我知道我对晚会有点迟，但是如果你能忍受这些线条是左alignment的话，那么就是把pipe子放在物品的前面，然后在左边缘放上一个面具，就像这样：
li::before { content: " | "; white-space: nowrap; } ul, li { display: inline; } .mask { width:4px; position: absolute; top:8px; //position as needed }
更完整的例子： http ： //jsbin.com/hoyadxi/1/edit
今天我遇到了一个解决scheme，看起来已经不在这里了，而且到目前为止似乎工作的很好。 被接受的答案在IE10上不起作用，但是这样做。 http://codepen.io/vithun/pen/yDsjf/学分当然是作者！;
.pipe-separated-list-container { overflow-x: hidden; } .pipe-separated-list-container ul { list-style-type: none; position: relative; left: -1px; padding: 0; } .pipe-separated-list-container ul li { display: inline-block; line-height: 1; padding: 0 1em; margin-bottom: 1em; border-left: 1px solid; }
<div class="pipe-separated-list-container"> <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> <li>Six</li> <li>Seven</li> <li>Eight</li> <li>Nine</li> <li>Ten</li> <li>Eleven</li> <li>Twelve</li> <li>Thirteen</li> <li>Fourteen</li> <li>Fifteen</li> <li>Sixteen</li> <li>Seventeen</li> <li>Eighteen</li> <li>Nineteen</li> <li>Twenty</li> <li>Twenty One</li> <li>Twenty Two</li> <li>Twenty Three</li> <li>Twenty Four</li> <li>Twenty Five</li> <li>Twenty Six</li> <li>Twenty Seven</li> <li>Twenty Eight</li> <li>Twenty Nine</li> <li>Thirty</li> </ul> </div>
是的，你需要使用伪元素和伪select器： http : //jsfiddle.net/cYky9/
你可以使用下面的CSS来解决。
ul li { float: left; } ul li:before { content: "|"; padding: 0 .5em; } ul li:first-child:before { content: ""; padding: 0; }
也应该在IE8 +上工作。
