Html 仅在元素之间带有项目符号的水平列表的 CSS 样式

Question

提问by Tauren

I'm not sure how to build a horizontal list that looks like this:

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

Centered list with bullets between items

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

Here are the rules:

以下是规则：

There is an unlimited number of items in the list.
Each item should be on a single line and not wrap to a 2nd line.
Multiple items can be on a single line if there is room for them to fit
If multiple items are on a single line, they should be separated by a divider
The divider looks like a bullet, but it could be an image
Need it to work in modern browsers as well as IE8+

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

The thing I'm not sure how to do is to make the bullets appear only between items, and not also before or after each row of items.

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

Answer 1

采纳答案by Jeffrey Nicholson Carré

Here is a further improved version. I kept getting an inconsistency at certain page widths where two bullets would be missing rather than just the last one. i.e.

这是进一步改进的版本。我一直在某些页面宽度上出现不一致，其中两个项目符号会丢失，而不仅仅是最后一个。IE

link1 · link2 · link3 link4

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

link5 · link6

链接5·链接6

I think the issue was that removing the last bullet separator could itself affect the text flow if the page width was just right. The new script locks the original text flow by adding and removing literal line breaks.

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

I have the same script to run every time the screen is resized so you don't get stuck with awkward line breaks.

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

<style>
ul { width: 700px; text-align : center }
ul li { display: inline; white-space: nowrap; }
ul li:after { content: " ul li { list-style: none; display: inline; }
ul li:after { content: " <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=); }
b7"; }
ul li:last-child:after { content: none; }
b7"; }
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 2

回答by JavaThunderFromDownunder

For those of you who don't have to worry about IE8, this is as simple as:

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

ul li { display: inline; white-space: pre; }
ul li:after { content: "  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=);
}
b7  "; }
ul li:last-child:after { content: ""; }

Answer 3

回答by Tom Robinson

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

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

Simple markup. No JavaScript. No :last-child

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

Link to CodePen

代码笔链接

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

回答by Zaz

For almost all browsers, you can use the CSS3 selector last-childinstead of JavaScript:

对于几乎所有浏览器，您都可以使用 CSS3 选择器last-child代替 JavaScript：

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

The white-space: prestops wrapping within list items (because usually you want it to wrap betweenlist items), and is a hack that allows you to increase the space between list items by adding spaces on the second line.

该white-space: pre列表项中停止包装（因为通常你希望它包之间的列表项），是一个黑客工具，允许您通过在第二行添加空格来增加列表项目之间的间隔。

u00b7? (MIDDLE DOT) is the standard unicode character for interpuncts, but you could also use u2022? (BULLET), ? u2b24? (BLACK LARGE CIRCLE), ? U+2043? (HYPHEN BULLET), or any other unicode character you choose.

u00b7? ( MIDDLE DOT) 是 interpuncts 的标准 unicode 字符，但您也可以使用u2022? ( BULLET), ? u2b24? ( BLACK LARGE CIRCLE), ? U+2043? ( HYPHEN BULLET) 或您选择的任何其他 Unicode 字符。

Note that some characters may not be supported on all systems.

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

Answer 5

回答by Jake

If you don't mind creating a PNGimage (with transparent background) of the bullet (or other separator), then you can use a natural space between the list items painted with this as the background.

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

Where the list items wrap onto the next line, the space---and thus its background---won't be rendered.

在列表项换行到下一行的地方，空间——因此它的背景——将不会被渲染。

This avoids layout issues relating to the space taken up by the separator, as well as avoiding any Javascript/jQuery, taking advantage of the browser's own layout engine to do the work. You can adjust the space for the separator with the word-spacing attribute.

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

You'll need to ensure there is no other whitespace within the markup that might otherwise be used as the natural space. You could use a higher-res image than the 5x5 here, in conjunction with background-size, so that it still looks ok when zooomed, but note IE8 doesn't support scaling of background images. The other drawback is that if you want to change the colour you'll have to edit the PNG.

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

FIDDLE

小提琴

Code based on modifying @bleuscyther's answer:

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

CSS :

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

HTML :

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

Answer 6

回答by Liphtier

user2511031's solution is almost ideal... it's just not a valid HTML. There should not be any SPAN outside LI, inside UL.

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

But it doesn't mean that there is no really ideal solution. I found one!

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

No need to put the spans allover and clean white-spaces in the markup. Place the needed space into the ":after" pseudo element content, apply the background image to it.

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

It does the same!

它做同样的事！

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

Here's the Fiddle

这是小提琴

Answer 7

回答by Bruce Allen

I just used text-indent to successfully style a bulleted list as follows:

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

HTML:

HTML：

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

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

    }

CSS:

CSS：

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

Answer 8

回答by caramba

http://jsfiddle.net/caramba/tSnnP/

##代码##

Answer 9

回答by zeusdeux

In the simplest of ways, all you would require is setting text-align: centeron the uland display: inline-blockon liin your stylesheet. You can use an image as a separator if you wish by leveraging the :afterpseudo class on li.

在最简单的方式，你将需要被设置text-align: center在ul与display: inline-block上li在样式表。如果您愿意，您可以通过利用上的:after伪类将图像用作分隔符li。

Here's an example.

这是一个例子。

Answer 10

回答by Pasq

##代码## ##代码##

You can also build this in JavaScript using a loop and concatenating a new li for x amount of list items but seeing as your post doesnt say anything about a dynamically generated list I'll leave it just as this for now.

您还可以使用循环在 JavaScript 中构建它，并为 x 数量的列表项连接一个新的 li，但由于您的帖子没有说明动态生成的列表，我暂时将其保留为这样。

Html 仅在元素之间带有项目符号的水平列表的 CSS 样式

提问by Tauren

采纳答案by Jeffrey Nicholson Carré

回答by JavaThunderFromDownunder

回答by Tom Robinson

回答by Zaz

回答by Jake

回答by Liphtier

回答by Bruce Allen

回答by caramba

回答by zeusdeux

回答by Pasq

相关推荐

最近更新

标签

Html 仅在元素之间带有项目符号的水平列表的 CSS 样式

提问by Tauren

采纳答案by Jeffrey Nicholson Carré

回答by JavaThunderFromDownunder

回答by Tom Robinson

回答by Zaz

回答by Jake

回答by Liphtier

回答by Bruce Allen

回答by caramba

回答by zeusdeux

回答by Pasq

相关推荐

Html 大量的 DOM。隐藏 vs 显示无

Html 悬停时点亮图像

在 Node.js 中加载基本 HTML

为什么钻石上有问号？出现在我的 HTML 中？

相关推荐

最近更新

标签