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

Add a pipe separator after items in an unordered list unless that item is the last on a line

提问by twsaef

Is it possible to style this html ...

是否可以设置此 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>

... like this ...

... 像这样 ...

... without adding classes to specific list items, or resorting to javascript? And if so how?

...不向特定列表项添加类，或诉诸javascript？如果是这样怎么办？

The line breaks are not fixed; the list widens to take up additional space, and list items are center aligned.

换行符不是固定的；列表变宽以占用更多空间，并且列表项居中对齐。

采纳答案by gfullam

This is now possible with flex-box

现在可以使用 flex-box

The keys to this technique:

该技术的关键：

• A container element set to overflow: hidden.
• Set justify-content: space-betweenon the ul(which is a flex-box) to force its flex-items to stretch to the left and right edges.
• Set margin-left: -1pxon the ulto cause its left edge to overflow the container.
• Set border-left: 1pxon the liflex-items.

• 设置为 的容器元素overflow: hidden。
• 设置justify-content: space-between在ul（这是一个 flex-box）上以强制其 flex-item 拉伸到左右边缘。
• 设置margin-left: -1px上ul导致其左边缘溢出容器。
• border-left: 1px在li弹性项目上设置。

The container acts as a mask hiding the borders of any flex-items touching its left edge.

容器充当遮罩，隐藏接触其左边缘的任何弹性项目的边框。

.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>

回答by

Just

只是

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

Of course, this does not actually solve the OP's problem. He wants to elide the vertical bars at the beginning and end of lines depending on where they are broken. I will go out on a limb and assert that this problem is not solvable using CSS, and not even with JS unless one wants to essentially rewrite the browser engine's text-measurement/layout/line breaking logic.

当然，这实际上并不能解决 OP 的问题。他想根据断行的位置删除行首和行尾的竖线。我会断言这个问题不能用 CSS 解决，甚至不能用 JS 解决，除非你想从根本上重写浏览器引擎的文本测量/布局/换行逻辑。

The only pieces of CSS, as far as I can see, that "know" about line breaking are, first, the ::first-linepseudo element, which does not help us here--in any case, it is limited to a few presentational attributes, and does not work together with things like ::before and ::after. The only other aspect of CSS I can think of that to some extent exposes line-breaking is hyphenation. However, hyphenating is all about addinga character (usually a dash) to the end of lines in certain situations, whereas here we are concerned about removinga character (the vertical line), so I just can't see how to apply any kind of hyphenation-related logic, even with the help of properties such as hyphenate-character.

就我所见，“知道”换行的唯一 CSS 部分是，首先，::first-line伪元素，它在这里对我们没有帮助——无论如何，它仅限于一些表现属性，以及不能与 ::before 和 ::after 之类的东西一起使用。我能想到的 CSS 的另一个方面在某种程度上暴露了换行符是连字符。然而，连字符就是在某些情况下在行尾添加一个字符（通常是破折号），而在这里我们关心的是删除一个字符（垂直线），所以我看不出如何应用任何类型连字相关的逻辑，即使在诸如hyphenate-character.

We have the word-spacingproperty, which is applied intra-line but not at line beginnings and endings, which seems promising, but it defines the width of the space between words, not the character(s) to be used.

我们有一个word-spacing属性，它应用于行内而不是行首和行尾，这看起来很有希望，但它定义了单词之间的空间宽度，而不是要使用的字符。

One wonders if there's some way to use the text-overflowproperty, which has the little-known ability to take two values for display of overflow text at both left and right, as in

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

text-overflow: '' '';

but there still doesn't seem to be any obvious way to get from A to B here.

但是这里似乎仍然没有任何明显的方法可以从 A 到 B。

回答by Nabil Kadimi

Before showing the code, it's worth mentioning that IE8 supports :first-childbut not :last-child, so in similar situations, you should use the :first-childpseudo-class.

在展示代码之前，值得一提的是，IE8 支持:first-child但不支持:last-child，因此在类似情况下，您应该使用:first-child伪类。

Demo

演示

#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>

回答by elclanrs

Use :afterpseudo selector. Look http://jsfiddle.net/A52T8/1/

使用: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; }

EDIT:

编辑：

jQuery solution:

jQuery 解决方案：

html:

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:

css：

div { width: 300px; }
ul li { float: left; border-right: 1px solid black; padding: 0 .5em; }
ul li:last-child { border: 0; }

jQuery

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;
    }
});

Take a look here. I also added a few more animals. http://jsfiddle.net/A52T8/10/

看看这里。我还添加了一些动物。http://jsfiddle.net/A52T8/10/

回答by user2020056

I know I'm a bit late to the party, but if you can put up with having the lines left-justified, one hack is to put the pipes before the items and then put a mask over the left edge, basically like so:

我知道我参加派对有点晚了，但如果你能忍受让线条左对齐，一个技巧是把管道放在物品之前，然后在左边缘放一个面具，基本上像这样：

li::before {
  content: " | ";
  white-space: nowrap;
}

ul, li {
  display: inline;
}

.mask {
  width:4px;
  position: absolute;
  top:8px; //position as needed
}

more complete example: http://jsbin.com/hoyaduxi/1/edit

更完整的例子：http: //jsbin.com/hoyaduxi/1/edit

回答by greim

One solution is to style the left border like so:

一种解决方案是像这样设置左边框的样式：

li { display: inline; }
li + li {
  border-left: 1px solid;
  margin-left:.5em;
  padding-left:.5em;
}

However, this may not give you desirable results if the entire lists wraps, like it does in your example. I.e. it would give something like:

但是，如果整个列表都换行，这可能不会给您理想的结果，就像您的示例中那样。即它会给出类似的东西：

foo | bar | baz
 | bob | bill
 | judy

回答by brahnp

I came across a solution today that does not appear to be here already and which seems to work quite well so far. The accepted answer does not work as-is on IE10 but this one does. http://codepen.io/vithun/pen/yDsjf/credit to the author of course!

我今天遇到了一个解决方案，该解决方案似乎已经不存在了，而且到目前为止似乎运行良好。接受的答案在 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>

回答by Bijoy Anupam

You can use the following CSS to solve.

您可以使用以下CSS来解决。

ul li { float: left; }
ul li:before { content: "|"; padding: 0 .5em; }
ul li:first-child:before { content: ""; padding: 0; }

Should work on IE8+ as well.

也应该在 IE8+ 上工作。

回答by kinakuta

Yes, you'll need to use pseudo elements AND pseudo selectors: http://jsfiddle.net/cYky9/

是的，您需要使用伪元素和伪选择器：http: //jsfiddle.net/cYky9/