我不确定如何构建如下所示的水平列表：以下是规则：列表中的项目数量不受限制。每个项目都应该在一行上，而不是换行到第二行。如果有适合它们的空间，多个项目可以在一行上如果多个项目在一行中，则应使用分隔符分隔分隔线看起来像一颗子弹，但它可能是一张图片需要它在现代浏览器和 IE8+ 中工作我不确定该怎么做的是让项目符号只出现在项目之间，而不是在每行项目之前或之后。原文由 Tauren 发布，翻译遵循 CC BY-SA 4.0 许可协议

对于那些不必担心 IE8 的人来说，这很简单： ul li { list-style: none; display: inline; } ul li:after { content: " \00b7"; } ul li:last-child:after { content: none; } 原文由 JavaThunderFromDownunder 发布，翻译遵循 CC BY-SA 3.0 许可协议

如何使用 CSS 在项目之间设置带有项目符号的水平列表的样式？

我不确定如何构建如下所示的水平列表：

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

以下是规则：

列表中的项目数量不受限制。
每个项目都应该在一行上，而不是换行到第二行。
如果有适合它们的空间，多个项目可以在一行上
如果多个项目在一行中，则应使用分隔符分隔
分隔线看起来像一颗子弹，但它可能是一张图片
需要它在现代浏览器和 IE8+ 中工作

我不确定该怎么做的是让项目符号只出现在项目之间，而不是在每行项目之前或之后。

原文由 Tauren 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 405

这是一个进一步改进的版本。在某些页面宽度下，我一直遇到不一致的情况，其中会缺少两个项目符号，而不仅仅是最后一个。 IE

链接 1 · 链接 2 · 链接 3 链接 4

链接5·链接6

我认为问题在于，如果页面宽度恰到好处，删除最后一个项目符号分隔符本身可能会影响文本流。新脚本通过添加和删除文字换行符来锁定原始文本流。

每次调整屏幕大小时，我都会运行相同的脚本，这样您就不会遇到尴尬的换行符。

 <style>
ul { width: 700px; text-align : center }
ul li { display: inline; white-space: nowrap; }
ul li:after { content: " \00b7"; }
ul li.nobullet:after { content: none; }
</style>

<body onresize="processBullets()" onload="processBullets()">
<ul>
    <li><a href="http://google.com">Harvard Medical School</a></li>
    <li><a href="http://google.com">Harvard College</a></li>
    <li><a href="http://google.com">Harvard Medical School</a></li>
    <li><a href="http://google.com">Harvard College</a></li>
    <li><a href="http://google.com">Harvard Medical School</a></li>
    <li><a href="http://google.com">Harvard College</a></li>
    <li><a href="http://google.com">Harvard Medical School</a></li>
    <li><a href="http://google.com">Harvard College</a></li>
</ul>
<body>

<script>
function processBullets() {
    var lastElement = false;
    $("br").remove(".tempbreak");
    $("ul li").each(function() {
        $(this).removeClass("nobullet");
        if (lastElement && lastElement.offset().top != $(this).offset().top) {
            $(lastElement).addClass("nobullet");
            $(lastElement).append('<br class="tempbreak" />');
        }
        lastElement = $(this);
    }).last().addClass("nobullet");
}

</script>

原文由 Jeffrey Nicholson Carré 发布，翻译遵循 CC BY-SA 3.0 许可协议

如何使用 CSS 在项目之间设置带有项目符号的水平列表的样式？

你尚未登录，登录后可以

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

Stack Overflow 翻译