如何仅在两个列表项之间显示项目符号，而不是在每个列表项之前？

Question

我正在努力满足列表中的换行符，以便使用更像分隔符的子弹点，到目前为止我已经这样了......

ul {
    margin:auto;
    max-width:280px;
    list-style:none;
    text-align:center;
}
li::before {
    content: "•"; 
    color: red;
}
li {
    display:inline;
}

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
</ul>

如何确保列表项不会在行之间拆分，并确保只有在不是新行的情况下才会显示项目符号？

我试着让事情看起来像这样......

容器的宽度和项目数确实发生了变化，因此尝试在不指定单个类的情况下执行此操作

Answer 1

一些技巧可以帮助您实现这一效果。 第一个使用list元素上的first-child来隐藏第一个分隔符。

第二个是有点hacky，但它是在菜单行包裹时隐藏子弹的方式;使用ul上的伪元素创建叠加层以隐藏第二行中的第一个项目符号。

＆＃13;

＆＃13;

ul{margin:auto;max-width:280px;list-style:none;text-align:center; position:relative; overflow:hidden;padding-left:0;}
ul:before {content:" "; height: 100%; position:absolute; left:0; width:1.5rem; background-color: #fff; z-index:2; }
ul> li{display:inline; padding:0 0.5rem 0 0.8rem; position:relative;}
ul > li:before {position:absolute; left:0; transform:translateX(-50%); content: "•"; color: red;}
ul > li:first-child:before{ display:none;}

＆＃13;

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

如果您想将底行对齐到中间，您想要更改方法，请使用flexbox，使用justify-content：center并在每个元素后向右移动子弹。将ul覆盖移动到右侧并隐藏最后一个子项而不是第一个孩子的子弹。

＆＃13;

＆＃13;

ul{margin:auto;max-width:300px;list-style:none;text-align:center; position:relative; overflow:hidden;padding-left:0; display:flex; flex-wrap:wrap; justify-content: center; }
ul:before {content:" "; height: 100%; position:absolute; right:0; width:0.75rem; background-color: #fff; z-index:2; }
ul> li{display:inline; padding:0 0.5rem; position:relative;}
ul > li:before {position:absolute; right:0; transform:translateX(50%); content: "•"; color: red;}
ul > li:last-child:before{ display:none;}

＆＃13;

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>

＆＃13;

＆＃13;

＆＃13;