在无序列表中的项之后添加管道分隔符,除非该项是行中的最后一项

Question

是否可以设置此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？如果是这样怎么样？

换行不固定; 列表变宽以占用额外空间,列表项目居中对齐.

Answer 1

只是

li + li::before {
    content: " | ";
}

当然,这实际上并没有解决OP的问题.他希望在线的起点和终点处取消垂直条,这取决于它们被破坏的位置.我将走出困境并断言这个问题不能用CSS解决,甚至不能用JS解决,除非你想要重写浏览器引擎的文本测量/布局/换行逻辑.

就我所知,唯一的CSS就是"了解"断线,首先是::first-line伪元素,这对我们没有帮助 - 无论如何,它只限于几个表现属性,并且不能与:: before和:: after之类的东西一起使用.CSS的唯一其他方面我可以想到这在某种程度上暴露了断行是连字符.然而,连字符都是关于在某些情况下将字符(通常是破折号)添加到行的末尾,而在这里我们关注删除字符(垂直线),所以我只是看不到如何应用任何类型与连字符相关的逻辑,即使借助于诸如的属性hyphenate-character.

我们有word-spacing属性,它在线内但不是在行开头和结尾处应用,这似乎很有希望,但它定义了单词之间的空间宽度,而不是要使用的字符.

人们想知道是否有某种方法可以使用该text-overflow属性,该属性具有鲜为人知的能力,可以采用两个值来显示左右两侧的溢出文本,如

text-overflow: '' '';

但是在这里似乎没有任何明显的方法从A到B.

Answer 2

现在可以使用 flex-box

这种技术的关键:

• 设置为的容器元素overflow: hidden.
• 设置justify-content: space-between在ul(这是一个弹性框)上,以强制其弹性项目伸展到左右边缘.
• 设置margin-left: -1px上ul,以导致其左边缘溢出容器.
• 设置border-left: 1px在li柔性项.

容器充当掩模,隐藏接触其左边缘的任何柔性物品的边界.

.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="https://cdnjs.cloudflare.com/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>

Answer 3

在显示代码之前,值得一提的是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>

Answer 4

使用:after伪选择器.看看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解决方案:

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/