Question

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

Centered list with bullets between items

以下是规则：

列表中的项目数量不限。
每个项目应该在一行上，而不是换行到第二行。
如果有足够的空间可以在一条线上使用多个项目
如果一行中有多个项目，则应使用分隔符
分隔符看起来像子弹，但它可能是图像
需要它在现代浏览器以及IE8 +

我不确定如何做的是让子弹只出现在项目之间，而不是出现在每一行项目之前或之后。

Answer 1

对于那些不必担心IE8的人来说，这很简单：

ul li { list-style: none; display: inline; }
ul li:after { content: " \00b7"; }
ul li:last-child:after { content: none; }

Answer 2

This solution matches all of OP's requirements, except IE8 compatibility (that was 2013).

Simple markup. No JavaScript. No :last-child

Link to CodePen

<ul>
    <li><a>Profile Image</a></li>
    <li><a>Name</a></li>
    <li><a>Activity Information</a></li>
    <li><a>Distance</a></li>
    <li><a>Pace</a></li>
    <li><a>Points Earned</a></li>
</ul>

ul { display:inline-block; padding:0; text-align:center }
li { display:inline }
li a { white-space:nowrap }
li:after { content:" "; letter-spacing:1em; background:center center no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABl0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4xMkMEa+wAAAAnSURBVBhXY/Dz89MA4sNA/B9Ka4AEYQIwfBgkiCwAxjhVopnppwEApxQqhnyQ+VkAAAAASUVORK5CYII=); }

Answer 3

这是一个进一步改进的版本。我在某些页面宽度上不断出现不一致的情况，其中两个子弹将丢失而不是最后一个。即

link1·link2·link3 link4

link5·link6

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

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

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

Answer 4

对于almost all browsers，您可以使用CSS3选择器last-child代替JavaScript：

ul li { display: inline; white-space: pre; }
ul li:after { content: "  \00b7  "; }
ul li:last-child:after { content: ""; }

white-space: pre阻止在列表项中包装（因为通常你希望它在列表项之间包装），并且是一个hack，允许你通过添加增加列表项之间的空间第二行的空格。

u00b7⋅（MIDDLE DOT）是交集的标准unicode字符，但您也可以使用u2022•（BULLET），u2b24⬤（ BLACK LARGE CIRCLE），U+2043⁃（HYPHEN BULLET）或您选择的任何其他unicode字符。

请注意，并非所有系统都支持某些字符。

Answer 5

如果您不介意创建项目符号（或其他分隔符）的PNG图像（透明背景），则可以使用以此绘制的列表项之间的自然空间作为背景。 / p>

如果列表项包装到下一行，则不会呈现空间---因此它的背景。

这避免了与分隔符占用的空间相关的布局问题，以及避免任何Javascript / jQuery，利用浏览器自己的布局引擎来完成工作。您可以使用单词间距属性调整分隔符的空间。

您需要确保标记中没有其他可能用作自然空间的空格。您可以使用比此处5x5更高分辨率的图像，结合背景大小，以便在动画时它仍然看起来不错，但请注意IE8不支持缩放背景图像。另一个缺点是，如果你想改变颜色，你必须编辑PNG。

<强> FIDDLE

基于修改@ bleuscyther答案的代码：

CSS：

ul { max-width: 700px; padding: 0; text-align: center; }
ul li { display: inline; white-space: nowrap; }
ul .separator {
  word-spacing: 1.1em;
  background-repeat: no-repeat;
  background-position: 50% 60%;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAOElEQVQI113M0Q3AIBRC0aM76P7jmHSmSj/6mibyc4EQkEEWuYtDmU1SXO1d6H7tjgupIl8+P+cD22cff9U1wbsAAAAASUVORK5CYII=);
}

HTML：

<ul>
    <li><a href="http://google.com">Harvard Medical School</a></li><span class='separator'>
    </span><li><a href="http://google.com">Harvard College</a></li><span class='separator'>
    </span><li><a href="http://google.com">Harvard Medical School</a></li><span class='separator'>
    </span><li><a href="http://google.com">Harvard College</a></li><span class='separator'>
    </span><li><a href="http://google.com">Harvard Medical School</a></li><span class='separator'>
    </span><li><a href="http://google.com">Harvard College</a></li><span class='separator'>
    </span><li><a href="http://google.com">Harvard Medical School</a></li><span class='separator'>
    </span><li><a href="http://google.com">Harvard College</a></li>
</ul>

Answer 6

user2511031的解决方案几乎是理想的......它不是有效的HTML。在UL内部，LI之外不应该有任何SPAN。

但这并不意味着没有真正理想的解决方案。我找到了一个！

无需将标记全部放在标记上并清除空白区域。将所需的空间放入＆＃34;：＆＃34;之后＆＃34;伪元素内容，将背景图像应用于它。

它也一样！

ul { max-width: 700px; padding: 0; text-align: center; }
ul li { display: inline; white-space: nowrap; }
ul li:after {
    content: " ";
    word-spacing: 2em;
    background-repeat: no-repeat;
    background-position: 50% 60%;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAOElEQVQI113M0Q3AIBRC0aM76P7jmHSmSj/6mibyc4EQkEEWuYtDmU1SXO1d6H7tjgupIl8+P+cD22cff9U1wbsAAAAASUVORK5CYII=);
}

这里是Fiddle

Answer 7

<强> http://jsfiddle.net/caramba/tSnnP/

<div>
    <ul>
        <li><span class="icon bull"></span>xxx</li>
        <li><span class="icon bull"></span>xxx</li>
        <li><span class="icon bull"></span>xxx</li>
    </ul>
    <ul>
        <li><span class="icon bull"></span>xxx</li>
        <li><span class="icon bull"></span>xxx</li>
        <li><span class="icon bull"></span>xxx</li>
        <li><span class="icon bull"></span>xxx</li>
        <li><span class="icon bull"></span>xxx</li>
    </ul>
</div>

<style type="text/css">
div {
    white-space: nowrap;
    width: 100%;
}
span {
    display:inline-block;
    margin:0 5px;
}
ul {
    text-align:center;
}
ul li {
    display:inline;
    margin:20px;

}
.hide {
    display:none;
}

.icon {
    position:relative;
    display:inline-block;
    background-position:-1000px -1000px;
    background-image:url(http://www.alexander-bown.com/wp-content/uploads/2011/05/big-black-dot.jpg);
    background-repeat:no-repeat;
    background-size:5px 5px;
    width:5px;
    height:5px;
}
.icon {
    background-position:0px 0px;
    top:-2px;
}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('ul li:first-child').children('span').addClass("hide");
    });
</script>

Answer 8

最简单的方法是，您需要在样式表中的text-align: center和ul display: inline-block上设置li。如果您希望利用:after上的li伪类，可以将图像用作分隔符。

这是一个example。

Answer 9

我只是使用text-indent来成功设置项目符号列表的样式，如下所示：

HTML：

<ul class="horizontal">
<li>Payment</li>
<li>Check</li>
<li>Direct Deposit</li>
</ul>

CSS：

ul.horizontal li { list-style-type:disc; float: left; text-indent:-4px; margin-right:16px; }

Answer 10

    ul li {
        display: inline;
        text-align: center
    }

  .separator {
        display: inline-block;
        background-color: black;
        width: 5px;
        height: 5px;
        border-radius: 45px;
        vertical-align: middle;

    }

<ul>
    <li>item 1</li> <div class='separator'></div>
    <li>item 2</li> <div class='separator'></div>
    <li>item 3</li> <div class='separator'></div>
    <li>item 4</li> <div class='separator'></div>
    <li>item 5</li>
</ul>

您也可以使用循环在JavaScript中构建它，并为x个列表项连接一个新的li，但是看到你的帖子没有说明动态生成的列表的任何内容我将暂时保留它。

Answer 11

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

水平列表的CSS样式，仅在元素之间使用子弹

11 个答案: