Maison > Article > interface Web > li和背景图片错位问题_html/css_WEB-ITnose
li和背景图片错位问题_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-21 09:21:191128parcourir
html:
css:
ul,li {margin:0;padding:0; text-align:left;}
.hot{text-align:left;margin:20px 10px 10px 0px;}
.hot ul{background:url(../images/u118_main_bg.gif) -858px 7px no-repeat;padding-left:25px;}
.hot li{ line-height:26px;list-style:none;}
所有数字都是在一个背景上，原来在没加(222) 这部分内容前是对齐的，现在加了之后错位了，请教各位如何解决啊？
回复讨论(解决方案)
代码贴得太少了
代码贴得太少了
css样式就这些了，还有html是这样
(222) 文字字号和前面设置成一样的，再一个就是调line-height
(222) 文字字号和前面设置成一样的，再一个就是调line-height
字号都是一样的，也加了line-height ，也还是一样
把全部代码贴一下
把全部代码贴一下
全部代码都已经贴出来了啊，html的就是那个repeater里的，对应的css就是上面的
其他的就没什么关系了就
不用整个页面的代码都贴出来没这个必要吧
试下这种
- 标题 (222)
ul,li {margin:0;padding:0; text-align:left;}
.hot{text-align:left;margin:20px 10px 10px 0px;}
.hot li{ line-height:26px;list-style:none;}
li i{background:url(../images/u118_main_bg.gif) -858px 7px no-repeat;padding-left:25px;}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>ul,li {margin:0;padding:0; text-align:left;}.hot{text-align:left;margin:20px 10px 10px 0px;}.hot li{ line-height:26px;list-style:none;}.hot{background:url(file:///C|/Users/Administrator/Desktop/QQ%E6%88%AA%E5%9B%BE20141112135229.png) 0 5px no-repeat;padding-left:25px;}</style></head><body><div class="hot"> <ul> <li><span class="fontsblue"><a href="article/1.html" title="标题">标题</a></span> <span class="fontgray">(222)</span></li> <li><span class="fontsblue"><a href="article/1.html" title="标题">标题</a></span> <span class="fontgray">(222)</span></li> <li><span class="fontsblue"><a href="article/1.html" title="标题">标题</a></span> <span class="fontgray">(222)</span></li> <li><span class="fontsblue"><a href="article/1.html" title="标题">标题</a></span> <span class="fontgray">(222)</span></li> <li><span class="fontsblue"><a href="article/1.html" title="标题">标题</a></span> <span class="fontgray">(222)</span></li> <li><span class="fontsblue"><a href="article/1.html" title="标题">标题</a></span> <span class="fontgray">(222)</span></li> </ul> </div></body></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>ul,li {margin:0;padding:0; text-align:left;}.hot{text-align:left;margin:20px 10px 10px 0px;}.hot li{ line-height:26px;list-style:none;}.hot{background:url(file:///C|/Users/Administrator/Desktop/QQ%E6%88%AA%E5%9B%BE20141112135229.png) 0 5px no-repeat;padding-left:25px;}</style></head><body><div class="hot"> <ul> <li><span class="fontsblue"><a href="article/1.html" title="标题">标题</a></span> <span class="fontgray">(222)</span></li> <li><span class="fontsblue"><a href="article/1.html" title="标题">标题</a></span> <span class="fontgray">(222)</span></li> <li><span class="fontsblue"><a href="article/1.html" title="标题">标题</a></span> <span class="fontgray">(222)</span></li> <li><span class="fontsblue"><a href="article/1.html" title="标题">标题</a></span> <span class="fontgray">(222)</span></li> <li><span class="fontsblue"><a href="article/1.html" title="标题">标题</a></span> <span class="fontgray">(222)</span></li> <li><span class="fontsblue"><a href="article/1.html" title="标题">标题</a></span> <span class="fontgray">(222)</span></li> </ul> </div></body></html> 非常感谢，原来是我fontgray的字体也要大一号的，没注意。之前一直认定是一样大小
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：菜鸟学习路，遇到了问题请大神帮忙_html/css_WEB-ITnoseArticle suivant：margin:0px;后面加【】为什么能调整排版？body>div这句代码是什么意思？_html/css_WEB-ITnose