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

我想在flexbox导航菜单之间添加项目符号，但只在同一行的flex项目之间显示它们。不是在行的开头或结尾，如果flex项本身在行中，也不是

我一直以这个（）问题作为出发点，但将前两个答案结合起来进行了修改，使其与flexbox一起工作

以下是我得到的：

JS:

$（函数（）{
var lastElement=false；
$（“ul li”）。每个功能（索引）{
if（lastElement&&lastElement.offset（）.top==$（this.offset（）.top）{
$（lastElement）.after（$（'
）.attr（'class'，'bullet'））；
}
lastElement=$（此）；
});
});

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

.子弹{
宽度：6px；
高度：7px；
背景位置：50%50%；
背景重复：无重复；
背景图片：url（数据：image/png；base64，ivborw0kggoaaaansuheugaaaaaaafcayaacnblaaaaoeleqvqi113m0q3aibrc0am76p7jmhsmsj/6mibyc4EQkEEWuYtDmU1SXO1d6H7tjgupIl8+P+cD22cff9U1wbsAAAAASUVORK5CYII=）；
}

大多数情况下，所有内容都正确渲染。但在某些浏览器宽度下，项目符号会添加到不应该添加的位置。例如，如果将窗口重新调整为678 px的宽度（根据在屏幕中间显示的CODEPNIE.IO计数器，同时重新调整大小），在不需要的时候，在右行的右侧出现一个弹头。（根据浏览器的不同，它可能在678px下正常工作，但确实存在一些问题，我只在Chrome和IE11上测试过）

有时需要刷新以修复项目符号位置，这是可以理解的，但在某些宽度下，刷新没有帮助，它们会错误地重新出现

我相信这个问题是由要点增加的额外空间造成的

我认为完全通过CSS而不是JS来实现这一点将是一个更简单、更干净的解决方案，但我不确定flexbox项目是否可能实现这一点。尽管flexbox项似乎比其内容占用更宽的宽度，css选择器：：after似乎只计算实际的内容宽度

我的JS怎么了？我能把它弄得更好/更干净吗

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

或者试试这个

div:before{
    content:"•";
}

---

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

更新后的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);
        });
    }

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

查看此更新

---

如果出于任何原因您不能使用这种CSS类方法，您可以在

中添加您的项目符号（如

或
），并使用CSS绝对定位它们。只要它们不影响
的总宽度，它就可以正常工作。
您可以仅使用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
}

我认为OP想要的不仅仅是用CSS添加一个项目符号。他只需要把它们放在菜单里面，而不需要放在菜单外面。您可以使用CSS类作为要点，但是您仍然需要根据屏幕大小在正确的项目上通过javascript切换该类。我将尝试类似的方法，但正如我在OP中所说的那样，：after没有像我正在寻找的那样在项目之间均匀地隔开它们。如果不清楚的话，我很抱歉。感谢您的回复，在某个时候，我打算添加它在任何窗口调整大小时重新运行函数的功能，但是错误仍然发生。我在我的OP中添加了一张图片，以显示我正在谈论的内容。@smokeyethbear我已经找到了发生这种情况的原因，并找到了解决方案。我会更新我的答案。我整天都在努力解决这个问题。工作完美。谢谢我有一种感觉，它与项目符号的宽度有关，但不知道如何在CSS中实现。我有一个非常独特的情况，我有一个以项目符号为中心的列表。这是不可能使用一个纯CSS的解决方案与一个负的空白，所以这种方法工作得很好，我也喜欢这个解决方案，漂亮和干净的使用只是CSS。我唯一的问题是，我的实际导航列表嵌套在flexbox布局中，对于桌面宽度，它被放置在徽标的右侧。因此，左边的负边距不一定会隐藏每行的第一个项目符号。我会尝试改变一切使用：之后和一个负的保证金权利，可能对我的工作。感谢manAnd回复我的第一条评论：或者只使用overflow:hidden；]是的，
overflow:hidden
应该在flexbox的父级上完成。这是一个很好的解决方案，它是一个简单但定义良好的布局。我肯定会推荐这个解决方案，而不是任何涉及javascript的解决方案。聪明的显示解决方案击败了简单的javascript解决方案lol。我想我对flex项目没有很好的理解——它总是占据flex容器的全部宽度。
.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 ..."*/
}

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

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