Question

我有一个这样的列表（假设它是动态的）：

A | B | ç

但我希望它只显示内部分隔符，无论它有多少元素：

A |乙

A | B | C | D | ë

这适用于此示例

<div class="toolbar">
  <div class="button">
  A
  </div>
  <div class="button">
  B
  </div>
  <div class="button">
  C
  </div>
</div>

这里有相关的CSS：

.toolbar .button:after {
    border-right: 1px solid #CCC;
    height: 17px;
    content: "";
    display: inline-block;
    float: left;
}

.toolbar .button:first-child:after {
  border-right: 0px;
}

.toolbar .button.hide {
  display:none;
}

但是，如果我将hide类添加到第一个元素，我会得到一个额外的边框，我不需要。

| B | ç

用css解决这个问题有一个很好的方法吗？我需要能够使用display:none ...

隐藏元素

Answer 1

你正在使事情复杂化并努力工作。您不需要button:after伪类只放置边框，只需将边框添加到按钮

https://jsfiddle.net/ggL4z0uv/1/

 .toolbar .button {
      border-right: 1px solid #CCC;
 }

删除button:after伪。

这就是全部！

修改

我阅读了你的评论，我做了一个简单的改变，以实现你真正需要的：

https://jsfiddle.net/ggL4z0uv/4/

.toolbar .button：last-child { border-right：0; }

由于此答案开头的更改，这是一个非常容易的更改，以实现以下行为：

A | B | C

B | C

请告诉我们这是否可以解决您的问题。

列出具有隐藏元素的分隔符

1 个答案:

修改