如何使用CSS在水平列表项之间添加项目符号样式？

Question

如何使用CSS在水平列表项之间添加项目符号样式？

htmlcss

45

我不确定如何构建一个看起来像这样的水平列表：

带有项目之间分隔符的居中列表

以下是规则：

列表中的项目数没有限制。
每个项目应该在一行上，不要换行到第二行。
如果有空间，多个项目可以在一行上。
如果多个项目在同一行上，它们应该由分隔符分开。
分隔符看起来像一个圆点，但它也可以是一个图像。
需要在现代浏览器以及IE8+中正常工作。

我不确定如何使圆点仅出现在项目之间，而不是在每一行项目之前或之后。

- Tauren

1

CSS没有办法区分“行”，因此它无法避免在后续行的第一项之前放置一个项目符号。 - David Thomas

4

请参见：https://dev59.com/t2kw5IYBdhLWcg3wg6ug - grc

1

@grc改进了居中：http://jsfiddle.net/bleuscyther/Y77LJ/ - Jeffrey Nicholson Carré

抱歉大家，发了这个问题然后就消失了。一直在忙着完成这个项目。最终，客户改变了要求，所以我也不需要解决这个问题了。非常感谢你们的努力和帮助！ - Tauren

@bleuscyther，你的jsfiddle很好。如果你把它作为答案发布，我会接受它作为解决方案。我真的希望不必要求JS，但并不意外需要它。感谢grc提供的SO链接！ - Tauren

显示剩余7条评论

11个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ibrahim · Answer 1

<table>
    <tr>
        <td>
    <ul>
        <li>First menu item</li>
    </ul>
            </td>
        <td>
    <ul>
        <li>Second menu item</li>
    </ul>
        </td>
        <td>
    <ul>
        <li>Third menu item</li>
    </ul>
        </td>
        </tr>
</table>