在 flexbox 项目之间添加均匀间隔的项目符号点（但仅在项目之间，而不是在包装行的开头或结尾）

Question

我想在我的 flexbox 导航菜单之间添加项目符号点，但它们只出现在同一行的 flex 项目之间。不在行首或行尾，如果 flex 项目本身在行上，则根本不会。

我一直使用这个 (CSS styling for horizontal list with bullet only between elements) 问题作为起点，但修改后结合了前两个答案以使其适用于 flexbox。

这是我得到的： http://codepen.io/anon/pen/EjQzWZ

JS:

<script>
$(function() {
    var lastElement = false;
    $("ul li").each(function(index) {
        if (lastElement && lastElement.offset().top == $(this).offset().top) {
            $(lastElement).after( $('<li>').attr('class', 'bullet') );
        }
        lastElement = $(this);
    });
});
</script>

CSS（基本上与我链接到的原始问题完全相同）：

<style>
.bullet {
    width: 6px;
    height: 7px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAOElEQVQI113M0Q3AIBRC0aM76P7jmHSmSj/6mibyc4EQkEEWuYtDmU1SXO1d6H7tjgupIl8+P+cD22cff9U1wbsAAAAASUVORK5CYII=);
}
</style>

大多数时候一切都正确呈现。但在某些浏览器宽度下，项目符号点会添加到不应该出现的位置。例如，如果将 window 的大小调整为 678 像素的宽度（根据调整大小时屏幕中间显示的 codepen.io 计数器），右侧会出现一个项目符号点在不应该的时候在顶行的一侧。（根据浏览器的不同，它可能在 678px 下正常工作，但确实有几个地方会出现，我只在 Chrome 和 IE11 上测试过）。

有时需要刷新来修复项目符号点的位置，这是可以理解的，但在某些宽度下刷新无济于事，它们会错误地重新出现。

我认为问题是由项目符号添加的额外 space 引起的。

我认为完全通过 CSS 而不是 JS 来完成它会是一个更简单、更清晰的解决方案，但我不确定这对 flexbox 项目是否可行。即使 flexbox 项目占用的宽度看起来比它们的内容更宽，css 选择器 ::after 似乎只计算实际的内容宽度。

我的 JS 怎么了？我能做到吗better/cleaner?

Answer 1

div:before{
    content:"\b7\a0"; /* \b7 is a middot, \a0 is a space */
    font-size:30px;
}

或者试试这个

div:before{
    content:"•";
}

Answer 2

您可以将项目符号逻辑放在一个函数中，然后在页面加载时调用该函数并将其附加到 window 调整大小事件。

更新后的 javascript 将如下所示：

   $(function() {
       addBullets();

      $(window).resize(addBullets);
   });

    function addBullets(){
        $('li.bullet').remove(); //remove bullets before you add new ones

        var lastElement = false;
        $("ul li").each(function(index) {
            if (lastElement && lastElement.offset().top == $(this).offset().top) {
                      $(lastElement).after( $('<li>').attr('class', 'bullet') );
            }
            lastElement = $(this);
        });
    }

查看更新后的 CodePen 演示。

此外，我认为纯 CSS 不可能做到这一点。

更新

子弹出现在那些特定宽度的边缘的原因是因为子弹本身在 <li> 的位置也占据了 6px 一块。因此，当您遍历 <li> 时，它会正确识别将项目符号放在后面的正确元素，但是当浏览器呈现所有小项目符号时，它会……以特定宽度……推最后一个 <li> 到下一行。

为了纠正这个问题，我为项目符号创建了一个 CSS class，并将其添加到需要项目符号的项目中，而不是创建新的 <li>，这会占用附加 space.

新 CSS:

.flex-item {
  position:relative; /*added*/
  flex: 1 1 auto;

    color: #a6a7a9;
    font-size:1.5em;

  padding: 50px; /*use padding instead of margin for easier absolute positioning of bullet*/

  color: black;
  text-align: center;
}

.flex-item.bullet:after{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  color:blue;
  content:"•"; /*could also be "url(data:image/png;base64 ..."*/
}

新 Javascript:

function addBullets(){
  $('li.bullet').removeClass('bullet'); //remove all bullet classes

    var lastElement = false;
    $("ul li").each(function(index) {
        if (lastElement && lastElement.offset().top == $(this).offset().top) 
            $(lastElement).addClass('bullet'); //add class

        lastElement = $(this);
    });
}

查看此更新 CodePen。

如果出于某种原因您不能使用这种 CSS class 方法，您可以在 [=13] 中添加项目符号（如 <img> 或 <div>） =] 并用 CSS 绝对定位它们。只要它们不影响 <ul> 的总宽度，它就可以正常工作。

Answer 3

您只能使用 CSS 执行此操作。

删除您的 .bullet 定义，并添加此 CSS:

.flex-container {
  margin-left: -10px;  //hide the first bullet on each row
}

.flex-item {
  position: relative;  //so we can have absolute positioning on the :before
}

.flex-item:before {
  content: "•";        //the bullet
  position: absolute;  //positioned absolutely
  left: -55px;         //account for the 50px margin and the bullet's width
}

Updated CodePen

Answer 4

您可以使用 :not(:first-child) 选择器将项目符号应用于除第一个子项以外的所有子项。

.flex-row
{
  display: flex;
  flex-direction: row;
  &.bulleted
  {
    div:not(:first-child):before{
      content: "•";
    }
  }
}

在 flexbox 项目之间添加均匀间隔的项目符号点（但仅在项目之间，而不是在包装行的开头或结尾）

Adding bullet points spaced evenly between flexbox items (but only between items, not at beginning or end of wrapped rows)

html

javascript

css

flexbox