Html 多个徽标之间的点
我在Html 多个徽标之间的点,html,css,Html,Css,我在中有一组徽标。代码如下所示,可在此处找到 CSS @font-face { font-family:'JustVectorRegular'; font-weight: normal; font-style: normal; src: url('fonts/justvector/justvector-webfont.eot'); src: url('fonts/justvector/justvector-webfont.eot?#iefix') form
中有一组徽标。代码如下所示,可在此处找到
CSS
@font-face {
font-family:'JustVectorRegular';
font-weight: normal;
font-style: normal;
src: url('fonts/justvector/justvector-webfont.eot');
src: url('fonts/justvector/justvector-webfont.eot?#iefix') format('eot'), url('fonts/justvector/justvector-webfont.woff') format('woff'), url('fonts/justvector/justvector-webfont.ttf') format('truetype'), url('fonts/justvector/justvector-webfont.svg#webfontmuk63VQd') format('svg');
}
.social {
padding:0;
margin:2em 0;
list-style:none;
text-align: center;
}
.social li {
display:inline-block;
padding:0;
margin-bottom: -3px;
}
.social li a {
display:block;
float:left;
margin: 0 .1em .2em 0;
line-height:100%;
text-align:center;
font-family:'JustVectorRegular';
font-size:32px;
padding: 8px 8px 8px 10px;
min-width:27px;
max-height:28px;
color:#444;
border-radius: 4px;
border: 1px solid #ddd;
}
HTML
<ul class="social">
<img src="images/mine/logo.png" style="width: 75px; height: 75px;" />
<i class="icon-remove"></i>
<img src="images/mine/logo.png" style="width: 75px; height: 75px;" />
<i class="icon-remove"></i>
<img src="images/mine/logo.png" style="width: 75px; height: 75px;" />
<i class="icon-remove"></i>
<img src="images/mine/logo.png" style="width: 75px; height: 75px;" />
<i class="icon-remove"></i>
<img src="images/mine/logo.png" style="width: 75px; height: 75px;" />
<i class="icon-remove"></i>
<img src="images/mine/logo.png" style="width: 75px; height: 75px;" />
<i class="icon-remove"></i>
<img src="images/mine/logo.png" style="width: 75px; height: 75px;" />
</ul>
我想通过在每一个图标之间插入一个项目符号来分解它们,但正如代码所描述的,它根据屏幕宽度来包装徽标,而一行末尾的一个项目符号看起来是错误的。我想让代码在每个logo后面插入一个项目符号,除了一行末尾的那一个
这可能吗?我真的卡住了,找不到任何帮助
谢谢:)
(如果我没有掌握正确的行话,我深表歉意-这对我来说是全新的)您可以为每个元素添加
:在伪元素之前,除了第一个元素:
LI + LI:before {content: "*"; }
你能添加你的HTML吗?而且,可能还有一位(代表)来展示你到目前为止所取得的成果。对不起,速度太快了,这对我来说都是新鲜事。它正在路上无法加载bulletpoint。不确定如何将字体加载到jsfiddle中这是如何代表您的代码的?css目标列出项目和锚定元素,它们都不在你的标记中,这和我的目标不太一样。也许我的问题不太清楚,尽管看着“:after”可能行得通,只要我能在最后一排停止。无论如何,谢谢:)除了第一个元素之外,每个元素前面的东西的视觉效果与每个元素后面的东西的视觉效果相似,除了最后一个。使用:before
的优点是它可以在不支持:last child
伪类的IE8中工作。如果IE8对您不重要,您可以使用LI:after{content:*“;}
和LI:last child{content:normal;}
。