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

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

html css

Html 如何使用CSS在项目之间使用项目符号设置水平列表的样式？,html,css,Html,Css,我不确定如何构建一个类似以下内容的水平列表：规则如下：列表中的项目数量不限每个项目应在一行，而不是包装到第二行如果有空间容纳多个项目，则可以在一行中放置多个项目如果一行上有多个项目，则应使用分隔符分隔分隔器看起来像子弹，但也可能是图像需要它在现代浏览器和IE8中工作吗+ 我不确定该如何做的是使项目符号仅在项目之间出现，而不是在每行项目之前或之后出现。 <div> <ul> <li><span class="ic

我不确定如何构建一个类似以下内容的水平列表：

规则如下：

列表中的项目数量不限
每个项目应在一行，而不是包装到第二行
如果有空间容纳多个项目，则可以在一行中放置多个项目
如果一行上有多个项目，则应使用分隔符分隔
分隔器看起来像子弹，但也可能是图像
需要它在现代浏览器和IE8中工作吗+

我不确定该如何做的是使项目符号仅在项目之间出现，而不是在每行项目之前或之后出现。

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



xxx
xxx
xxx


xxx
xxx
xxx
xxx
xxx

div{
空白：nowrap；
宽度：100%；
}
跨度{
显示：内联块；
利润率：0.5px；
}
保险商实验室{
文本对齐：居中；
}
ulli{
显示：内联；
利润率：20px；
}
.隐藏{
显示：无；
}
.图标{
位置：相对位置；
显示：内联块；
背景位置：-1000px-1000px；
背景图片：url(http://www.alexander-bown.com/wp-content/uploads/2011/05/big-black-dot.jpg);
背景重复：无重复；
背景尺寸：5px 5px；
宽度：5px；
高度：5px；
}
.图标{
背景位置：0px 0px；
顶部：-2px；
}
$（文档）.ready（函数（）{
$（'ul li:first child'）.children（'span'）.addClass（“hide”）；
});

最简单的方法是，只需在样式表中的

ul

和

li

上设置

text align:center

。如果愿意，可以利用

li

上的

：after

伪类将图像用作分隔符

这是一个。

这是一个进一步改进的版本。在某些页面宽度上，我不断发现不一致的地方，两个项目可能会丢失，而不仅仅是最后一个。i、 e

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

每次调整屏幕大小时，我都要运行相同的脚本，这样你就不会陷入尴尬的换行

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


ul{宽度：700px；文本对齐：中心}
ul li{显示：内联；空白：nowrap；}
ul li:在{内容：“\00b7”；}之后
ul li.nobullet:在{内容：无；}之后










函数processBullets（）{
var lastElement=false；
$（“br”）。删除（“.tempbreak”）；
$（“ul li”）。每个（函数（）{
$（this.removeClass（“nobullet”）；
if（lastElement&&lastElement.offset（）.top！=$（this.offset（）.top）{
$（lastElement）.addClass（“nobullet”）；
$（lastElement）.append（“
”）；
}
lastElement=$（此）；
}).last（）.addClass（“nobullet”）；
}

我刚刚使用文本缩进成功地设置了项目符号列表的样式，如下所示：

HTML:



第一个菜单项


第二个菜单项


第三个菜单项

如果您不介意创建项目符号（或其他分隔符）的

PNG

图像（具有透明背景），则可以在以此为背景绘制的列表项之间使用自然空间

如果列表项换行到下一行，则不会渲染空间，因此也不会渲染其背景

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

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

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

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

CSS:

HTML:











的解决方案几乎是理想的。。。它只是不是一个有效的HTML。在LI之外，UL内部不应有任何跨度
但这并不意味着没有真正理想的解决方案。我找到一个
无需在标记中放置满量程和干净的空白。将所需的空间放入“：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=);
}

对于那些不必担心IE8的人，这里有一个
，简单如下：
ul li { list-style: none; display: inline; }
ul li:after { content: " \00b7"; }
ul li:last-child:after { content: none; }

对于，您可以使用CSS3选择器最后一个子项
而不是JavaScript：
ul li { display: inline; white-space: pre; }
ul li:after { content: "  \00b7  "; }
ul li:last-child:after { content: ""; }

whitespace:pre
停止在列表项内换行（因为通常您希望它在列表项之间换行），它是一种允许您通过在第二行添加空格来增加列表项之间空间的方法
u00b7
⋅ （MIDDLE DOT
）是interpuncts的标准unicode字符，但也可以使用u2022
•（BULLET
），u2b24
⬤ （黑色大圆
），U+2043
——（连字符
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=);
}

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

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