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

76

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

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

html  css 
— sa
source
1
— d4nyll
1
@danyll该问题涉及多行列表，但没有，并且有解决方案。
— twsaef 2015年

Answers:

65

现在可以使用 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>
展开摘要

— 富勒姆
source
34
而且您只花了三年时间就得到了答案。现在您可以完成该项目！迟到总比不到好。;）
— gfullam 2015年
2
太好了 我需要一个项目符号分隔符，并且能够通过这种方法和一些调整来获得它。这可以用于您可以使用CSS设置样式的任何效果：-相对放置LI-使用：after和content属性添加项目符号-绝对放置：after-将：after的left属性调整为其宽度的一半内容-调整UL上的负边距以隐藏项目符号-调整右侧边距以固定间距
— Blorf
这个解决方案很好，但是最后一行的链接似乎很长，可以解决吗？
— Naveen Kumar PG
@NaveenKumarPG嵌入式示例中没有链接；并添加锚标记以在每个列表项内创建链接不会导致拉伸。我不确定您指的是什么。
— gfullam '17
1
使用Bootstrap时，我遇到了与@nilon相同的问题。我最终拆开了CSS重置，直到找到了罪魁祸首，以下是引起我的原因： ul, li { padding: 0; }
— LinkXXI
99

只是

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

当然，这实际上并不能解决OP的问题。他想根据折断的位置在行的开头和结尾处消除竖线。我会大步走出去，断言使用CSS不能解决此问题，甚至对于JS也无法解决，除非人们想本质上重写浏览器引擎的text-measurement / layout /换行逻辑。

据我所知，唯一的CSS关于断行的知识是，首先是::first-line伪元素，这在这里无济于事-无论如何，它仅限于一些表示属性，以及不能与:: before和:: after这样的东西一起使用。我能想到的CSS的惟一方面在某种程度上暴露了断行是连字符。但是，连字符只是在某些情况下在行尾添加一个字符（通常是一个破折号），而这里我们担心的是删除字符（垂直线），所以我只是看不到如何应用任何一种字符与断字相关的逻辑，即使借助的属性也是如此hyphenate-character。

我们拥有该word-spacing属性，该属性在行内应用，但不在行的开头和结尾处应用，这似乎很有希望，但是它定义了单词之间的间距宽度，而不是所使用的字符。

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

text-overflow: '' '';

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

是的，我很确定这是正确的答案，直到扩展CSS以了解换行符为止。
— twsaef 2013年
28

在显示代码之前，值得一提的是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>
展开摘要

— 纳比尔·卡迪米（Nabil Kadimi）
source
15

使用: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/

— 氏族
source
2
但这不会解决尾随管道的断线问题-jsfiddle.net/A52T8/3
— twsaef 2012年
@Dan基本上就是kinakuta的答案的工作方式，但是反过来，由于相同的原因，它也存在缺陷。
— twsaef'2
由于我对此也感到好奇，因此我为您设计了一个解决方案，因此我编辑了原始答案。有用。
— elclanrs
糟糕，忘记添加div宽度。固定。无需向下投票。大声笑我不好的jsfiddle.net/A52T8/9
— elclanrs 2012年
1
到目前为止，这是正确输出的唯一答案，但是不幸的是，它需要使用javascript。
— twsaef 2012年
3

我知道我参加聚会有点晚了，但是如果您可以忍受将行左对齐的话，一个技巧是在项目之前放置管道，然后在左边缘放置遮罩，基本上是这样的：

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

— 用户2020056
source
2

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

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

但是，如果整个列表都包装好了，这可能不会为您带来理想的结果，就像您的示例中所做的那样。即它会给像：

foo | bar | baz
 | bob | bill
 | judy
— 格里姆
source
是的，这就是问题所在。有没有解决办法？
— twsaef'2
1
我想您需要一些js解决方案
— elclanrs 2012年
1

今天，我遇到了一个解决方案，该解决方案似乎还没有出现，并且到目前为止效果很好。可接受的答案不能在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>
展开摘要

— 布兰普
source
有趣。它是如何工作的，并且受父字体大小的更改影响？另外，此解决方案不能使对齐项居中:)
— twsaef
哦，您是对的，只有在对齐时才能使用！对我而言，这并没有发生，因为这实际上是我在特定情况下所追求的。
— brahnp '16
0

稍微修改的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>
— 用户编码器
source
-1

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

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

也应该在IE8 +上运行。

— 比乔伊·阿努帕姆（Bijoy Anupam）
source
但是它不会删除每行之前的小节，而只会删除第一行中的小节。
— acme 2013年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.