CSS精灵不内联显示_Css_Css Sprites

CSS精灵不内联显示

css

CSS精灵不内联显示,css,css-sprites,Css,Css Sprites,我的一些问题是我使用的代码来自-烟花的东西是一样进口，其余的CSS我用他的东西，权利到颜色。但我在某个地方搞砸了，我不知道在哪里代码如下。我的精灵和悬停显示得很好，但它们显示为一块按钮，而不是一条线。我在不同的地方尝试了float:left，display:block，甚至将我的精灵重新导出为水平而不是标准，但都没有效果 <code> @charset "UTF-8"; body { margin:0; padding:0; background:#000; } header n

我的一些问题是我使用的代码来自-烟花的东西是一样进口，其余的CSS我用他的东西，权利到颜色。但我在某个地方搞砸了，我不知道在哪里

代码如下。我的精灵和悬停显示得很好，但它们显示为一块按钮，而不是一条线。我在不同的地方尝试了

float:left

，

display:block

，甚至将我的精灵重新导出为水平而不是标准，但都没有效果

<code>
@charset "UTF-8";
body {
margin:0;
padding:0;
background:#000;
}

header nav {
width:100%;
background:#333;
text-align:center;
position:relative;
font:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
height:98px;
border-bottom:12px solid black;
}

header nav ul {
padding:0;
margin:0;
list-style:none;
}

header nav ul li {
position:relative;
width:110px;
height;90px
float:left;
border-bottom:12px solid #000;
border-left:1px solid #333
border-right:1px solid #666;
}

header nav ul li:hover {
border-bottom-color:#FFC926;
}

header nav ul li a {
width:110%;
color:#FFF;
text-decoration:none;
display:inline;
float:left;
padding-top:75px

}
.navsymbol li{    background:url("https://dl.dropboxusercontent.com/u/50029017/untitled%20folder/navsymbol.png") no-repeat;}
li.nav_Home{ width:342px; height:70px; background-position:-10px -10px; }
li.nav_Home:hover{ width:342px; height:70px; background-position:-362px -10px; }
li.nav_Contact{ width:342px; height:70px; background-position:-714px -10px; }
li.nav_Contact:hover{ width:342px; height:70px; background-position:-1066px -10px; }
li.nav_Design{ width:342px; height:70px; background-position:-1418px -10px; }
li.nav_Design:hover{ width:342px; height:70px; background-position:-1770px -10px; }
</code>

和html：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="nav.css">
</head>

<body>
<header>
<nav>
<ul class="navsymbol">
<li class="nav_Home"><a href="#"></a></li>
<li class="nav_Design"><a href="#"></a></li>
<li class="nav_Contact"><a href="#"></a></li>
</ul>
</nav>
</header>

</body>
</html>


标题

在后台url中的

https

位置使用

http

.navsymbol li{    background:url("http://dl.dropboxusercontent.com/u/50029017/untitled%20folder/navsymbol.png") no-repeat;}

看起来你只是有一个打字错误：

header nav ul li {
position:relative;
width:110px;
height;90px /* should be- height:90px;*/
float:left;
border-bottom:12px solid #000;
border-left:1px solid #333
border-right:1px solid #666;
}

显然，精灵已经变成了404，因此示例现在不起作用…

更改

header nav ul li {
position:relative;
width:110px;
height;90px /* should be- height:90px;*/
float:left;
border-bottom:12px solid #000;
border-left:1px solid #333
border-right:1px solid #666;
}

到

并插入到css文件中

.navsymbol:after{
    clear:both;
}
.navsymbol:after,.navsymbol:before{
    display:table;
    content:"";
}

你也可以发布你的html吗？难道图像根本没有显示出来吗？你能把“无标题文件夹”重命名为无标题文件夹或其他什么吗？删除所有空格。有些浏览器不喜欢空格。几乎令人惊讶的是，这些图像是以块的形式显示的，而不是以内联的方式显示的。我做了一些研究，说CSS精灵通常是在一个块中完成的，但即使将其更改为显示：inline也没有帮助（除非我更改了错误的东西？）精灵发生了什么？它似乎已经变成了404？我按照下面的建议将它从Dropbox文件夹中移出，尽管所有这些图像的移动现在让我对这些文件链接到什么感到困惑！我将创建一些新文件夹，并将它们与Dropbox链接起来，看看现在是否有效。嗯，尝试一下，但它会完全丢失精灵，因为它们被托管在我自己的Dropbox上，直到我可以让它工作为止。可以在浏览器和live的预览中使用https，但只能在块中使用。但不能在后台url中使用https。所以只要下载图片并把它放在本地文件夹中，就像ImagewasnotMe一样——当我带着我的源文件回到笔记本电脑上时，我会尝试一下你的JSFIDLE。谢谢你的时间！啊-对不起，我一直想把东西移到本地文件中，所以我把它弄坏了！我会把它放回原处：）@AishaC你纠正错别字了吗？我已经纠正了，但还没有把新的图像文件移过去-一旦我染完头发，我就可以把它恢复过来，希望能把这个愚蠢的菜单问题整理好！：）为什么要添加空的伪元素？除了空的伪元素之外，这段代码的其余部分都起作用了（仍然在寻找我的图像的最佳宿主位置，因为https也是一个问题）-不过，我不完全确定为什么？@AishaC工作位看起来是直接从我的答案中复制的。。。空的伪元素实际上是无用的…我确实这么认为！好吧，如果是你的密码，非常感谢：）我已经从帖子上删除了记号，以回应他偷来的密码。

.navsymbol:after{
    clear:both;
}
.navsymbol:after,.navsymbol:before{
    display:table;
    content:"";
}