水平列表的CSS样式,仅在元素之间使用子弹
我不确定如何构建一个如下所示的水平列表:
以下是规则:
- 列表中有无限数量的项目.
- 每个项目应该在一行上,而不是换行到第二行.
- 如果有足够的空间,可以在一条线上放置多个项目
- 如果一行中有多个项目,则应使用分隔符将它们分开
- 分隔物看起来像子弹,但它可能是一个图像
- 需要它在现代浏览器以及IE8 +中工作
我不确定怎么做的事情是让子弹只出现在物品之间,而不是出现在每排物品之前或之后.
小智 23
对于那些不必担心IE8的人来说,这很简单:
ul li { list-style: none; display: inline; }
ul li:after { content: " \00b7"; }
ul li:last-child:after { content: none; }
- 第2行和第3行可以通过使用"not-last-child"来简化:`ul li:not(:last-child):在{content:"\ 00b7"之后; }(它确实在包裹的行的末尾添加了一个子弹) (4认同)
- 这实际上有用吗？它也不会在每一行的末尾添加一颗子弹吗？ (3认同)
- 这也适用于 unicode 项目符号： `content: " \2022";` (2认同)
Tom*_*son 19
该解决方案符合OP的所有要求,IE8兼容性除外(即2013年).
简单的标记.没有JavaScript.没有:last-child
<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=); }
- 这个解决方案是一个很好的解决方案，但是您需要注意空格。@Ryan，您的CodePen示例在`</a>`标记后有换行符，以防止显示项目符号。如果删除换行符，则效果很好。 (2认同)
这是一个进一步改进的版本.我在某些页面宽度上不断出现不一致的情况,其中两个子弹将丢失而不是最后一个.即
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>
对于几乎所有浏览器,您可以使用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)是interpuncts的标准unicode字符,但您也可以使用u2022•(BULLET), u2b24⬤(BLACK LARGE CIRCLE), U+2043⁃(HYPHEN BULLET)或您选择的任何其他unicode字符.
请注意,并非所有系统都支持某些字符.
- 这种方法的两个缺点是：如果HTML中有换行符，则`pre`会将其弄乱，并且，如果设备太窄以至于它显示了多行`li`元素，则每行的末尾也会显示项目符号行（直到最后一个）。 (2认同)
如果您不介意创建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>