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>

......像这样...

enter image description here

...没有向特定列表项添加类，或诉诸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 flex-items。

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/

Answer 5

我知道我在聚会上有点迟了，但是如果你能忍受线路左对齐，一个黑客是将管道放在物品前面，然后在左边缘上盖上一个面具，基本上是这样的：

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

ul, li {
  display: inline;
}

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

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

Answer 6

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

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

但是，如果整个列表包装，这可能不会给您带来理想的结果，就像在您的示例中一样。即它会给出类似的东西：

foo | bar | baz
 | bob | bill
 | judy

Answer 7

我今天遇到的解决方案似乎并不存在，到目前为止看起来效果还不错。接受的答案在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>

Answer 8

稍作修改的SCSS版本，使您可以控制管道|的大小，并且在遵守边框的同时消除了第一个和最后一个列表项的填充。


$pipe-list-height: 20px;
$pipe-list-padding: 15px;

.pipe-list {
    position: relative;
    overflow: hidden;
    height: $pipe-list-height;

    > ul {
        display: flex;
        flex-direction: row;

        > li {
            position: relative;
            padding: 0 $pipe-list-padding;

            &:after {
                content: " ";
                position: absolute;
                border-right: 1px solid gray;
                top: 10%;
                right: 0;
                height: 75%;
                margin-top: auto;
                margin-bottom: auto;
            }

            &:first-child {
                padding-left: 0;
            }

            &:last-child {
                padding-right: 0;

                &:after {
                    border-right: none;
                }
            }
        }
    }
}

<div class="pipe-list">
  <ul>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
  </ul>
</div>

Answer 9

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

Answer 10

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

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

也应该在IE8 +上工作。

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

10 个答案:

现在可以使用`flex-box`

演示

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

10 个答案:

现在可以使用flex-box

演示

现在可以使用`flex-box`