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

Question

我想在我的flexbox导航菜单之间添加项目符号，但只有它们出现在同一行的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>

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

有时需要刷新才能修复子弹点位置，这是可以理解的，但在某些宽度下，刷新无效并且它们会重新出现错误。

我认为问题是由子弹点添加的额外空间引起的。

我认为通过CSS而不是JS来完成它会是一个更简单，更清晰的解决方案，但我不确定这对Flexbox项目是否可行。尽管flexbox项目的宽度似乎比其内容宽，但css selector :: after似乎只计算实际内容宽度。

我的JS发生了什么？我可以让它更好/更清洁吗？

Answer 1

您可以将子弹逻辑放在一个函数中，然后在页面加载时调用该函数并将其附加到窗口调整大小事件。

更新的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>时，它会正确识别正确的元素，以便将子弹放在后面，但是当浏览器呈现所有小子弹时，它会...以某个宽度...推动最后一个{ {1}}到下一行。

为了纠正这个问题，我已经为子弹创建了一个CSS类，并将其添加到需要项目符号的项目中，而不是创建新的<li>，这会占用额外的空间。

新CSS：

<li>

新Javascript：

.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 ..."*/
}

请参阅此更新CodePen。

如果出于某种原因无法使用此CSS类方法，您可以在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); }); } 内添加项目符号（<img>或<div>），并使用CSS完全定位它们。只要它们对<li>的总宽度没有贡献，它应该可以正常工作。

Answer 2

您只能使用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 3

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

或试试这个

div:before{
    content:"•";
}