45

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

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

以下是规则：

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

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

4

11 回答 11

37

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

ul li { list-style: none; display: inline; }
ul li:after { content: " \00b7"; }
ul li:last-child:after { content: none; }
于 2014-07-11T20:55:32.793 回答
33

此解决方案符合 OP 的所有要求，除了 IE8 兼容性（即 2013 年）。

简单的标记。没有 JavaScript。不:last-child

链接到 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=); }

在此处输入图像描述

于 2016-10-20T18:54:23.533 回答
14

对于几乎所有浏览器，您都可以使用 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换行（因为通常您希望它在列表项之间换行），并且是一种允许您通过在第二行添加空格来增加列表项之间空间的技巧。

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

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

于 2016-01-18T00:55:58.580 回答
10

这是一个进一步改进的版本。我一直在某些页面宽度上遇到不一致的情况，其中两个项目符号会丢失，而不仅仅是最后一个。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>
于 2013-03-25T16:00:25.300 回答
6

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

在列表项换行到下一行的地方，空间——以及它的背景——将不会被呈现。

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

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

小提琴

基于修改@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>
于 2014-04-30T18:51:16.760 回答
4

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

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

无需在标记中放置整个跨度和干净的空白。将所需的空间放入“:after”伪元素内容中，为其应用背景图像。

它也一样！

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=);
}

这是小提琴

于 2014-06-01T13:58:12.870 回答
1

我刚刚使用 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; 
}
于 2013-09-10T17:51:48.013 回答
0

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>
于 2013-03-09T09:14:04.183 回答
0

以最简单的方式，您只需要在样式表中设置text-align: centeronul和display: inline-blockon即可。li如果您愿意，可以通过利用:afteron 上的伪类来使用图像作为分隔符li。

这是一个例子。

于 2013-03-13T13:11:44.243 回答
0 
    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，但看到您的帖子没有说明动态生成的列表，我暂时将其保留。

于 2017-05-16T21:27:55.180 回答
-5 
<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>
于 2013-10-23T11:13:11.717 回答