我在这里做错了什么？我无法让 Sprite 正常工作。当我检查元素时，它的高度或宽度不正确。我已经让 sprite 使用带有背景图像的容器 div，但我认为在这种情况下使用包装器是不正确的。
这是我正在尝试做的..
<html>
<style>
.bottomtable{display:block;}
.bottomtable .close {float: right;margin-right:5px;margin-top:25px;display:inline;position:relative;background-image:url('http://www.freeimagehosting.net/o2gz4');background-position:-278px -18px;height:7px;width:7px;}
.bottomtable .close a {height:7px;width:7px;}
.bottomtable .titletext{text-align: right;float: right;margin-right:5px;margin-top:-20px;display:block;}
.bottomtable h5{margin:0;padding:0;font-size: 14px;font-weight:normal;display: inline;}
.bottomtable ul {display:block;padding:5px;margin:0;}
.bottomtable li {list-style-type:none;padding:10px;margin:0;height:75px;display:block;}
.bottomtable li a{text-decoration:underline;font-weight:bold;display:block;margin-bottom:5px;}
.bottomtable li a span{display:block;text-decoration:underline;font-weight:bold;margin:2px 0 4px;}
.bottomtable ul img {display:inline;float:left;margin-top:-2px;margin-right:20px;}
</style>
<body>
<div class="bottomtable">
<ul>
<li><h5><a href="#">some title</a></h5><a href="javascript://close" class="close" title=""> </a>this is some text here..............<div style="clear: right;"></div> </li>
<li><h5><a href="#">some title</a></h5><a href="javascript://close" class="close" title=""> </a>this is some text here..............<div style="clear: right;"></div> </li>
<li><h5><a href="#">some title</a></h5><a href="javascript://close" class="close" title=""> </a>this is some text here..............<div style="clear: right;"></div> </li>
<li><h5><a href="#">some title</a></h5><a href="javascript://close" class="close" title=""> </a>this is some text here..............<div style="clear: right;"></div> </li>
</ul>
</div>
</style>
</html>
`
您只能看到 X 的一小部分。
如果我不在链接之间放置空格，它根本不会显示任何内容...一定是我做错了什么。它是什么？我检查了很多网站，他们似乎不需要那里的空间。
最佳答案
这东西有用。请检查这个:
<html>
<style>
.bottomtable{display:block;}
.bottomtable .close {background-image:url("http://www.freeimagehosting.net/newuploads/o2gz4.png");background-position: -278px -18px;color: #FFFFFF;display: inline;float: right;height: 10px;margin-right: 5px; margin-top: 10px;position: relative;width: 11px;}
.bottomtable .close a {height:7px;width:7px;}
.bottomtable .titletext{text-align: right;float: right;margin-right:5px;margin-top:-20px;display:block;}
.bottomtable h5{margin:0;padding:0;font-size: 14px;font-weight:normal;display: inline;}
.bottomtable ul {display:block;padding:5px;margin:0;}
.bottomtable li {list-style-type:none;padding:10px;margin:0;height:75px;display:block;}
.bottomtable li a{text-decoration:underline;font-weight:bold;display:block;margin-bottom:5px;}
.bottomtable li a span{display:block;text-decoration:underline;font-weight:bold;margin:2px 0 4px;}
.bottomtable ul img {display:inline;float:left;margin-top:-2px;margin-right:20px;}
</style>
<body>
<div class="bottomtable">
<ul>
<li><h5><a href="#">some title</a></h5><a href="javascript://close" class="close" title=""> </a>this is some text here..............<div style="clear: right;"></div> </li>
<li><h5><a href="#">some title</a></h5><a href="javascript://close" class="close" title=""> </a>this is some text here..............<div style="clear: right;"></div> </li>
<li><h5><a href="#">some title</a></h5><a href="javascript://close" class="close" title=""> </a>this is some text here..............<div style="clear: right;"></div> </li>
<li><h5><a href="#">some title</a></h5><a href="javascript://close" class="close" title=""> </a>this is some text here..............<div style="clear: right;"></div> </li>
</ul>
</div>
</body>
</html>
你的背景图片路径有误，你必须指定完整的图片地址，即http://www.freeimagehosting.net/newuploads/o2gz4.png
希望对你有帮助
关于css 和 sprites - 意想不到的结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9052008/