Question

我需要在WordPress页脚中水平显示9个图像。我输入了以下HTML：

<div id="sponsers">
<ul>
<li><img src="http://mysite.com/image1.png" width=257 height=67></li>
<li><img src="http://mysite.com/image1.png" width=217 height=29></li>
<li><img src="http://mysite.com/image1.png" width=178 height=49></li>
<li><img src="http://mysite.com/image1.png" width=64 height=68></li>
<li><img src="http://mysite.com/image1.png" width=103 height=162></li>
<li><img src="http://mysite.com/image1.png" width=66 height=56></li>
<li><img src="http://mysite.com/image1.png" width=121 height=85></li>
<li><img src="http://mysite.com/image1.png" width=134 height=36></li>
<li><img src="http://mysite.com/image1.png" width=162 height=61></li>
</ul>
</div>

CSS：

.sponsers ul {
    margin: 0; padding: 0; 
    display: inline;
    list-style-type: none; list-style-image: none;
}
.sponsers li {
    isplay: inline;
    padding-right: 0px;
    width: 900px;
    list-style-type: none; list-style-image: none;
}

图像仍然以垂直线显示，有三个小列表点。它似乎忽略了CSS。我可能错过了一些明显的东西，或者没有正确的样式。有什么好主意吗？

Answer 1

CSS中的.是一个类，但您的<div>有一个ID，而不是一个类。将您的CSS切换到#sponsers等等，它会起作用。

（顺便说一句，您不需要显示<ul>内联 - 只需<li> s。）

Answer 2

从ul和li中删除内联。在float: left上使用li。将溢出隐藏到sponsers div。最大的错误是使用. id。使用#sponsers。

以下是一个有效的示例：http://jsfiddle.net/rutwick/NG2nF/

我使用的CSS：

#sponsers{
    overflow: hidden;
}

#sponsers ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

#sponsers ul li{
    float: left;
    padding: 0 5px;
}

#sponsers ul li img{
    height: 50px;
    width: 50px;   
}

Answer 3

有几件事需要解决在您的CSS中，当您在标记中提供.sponsers时，您有id。这就是为什么任何一种风格都不会生效的原因。其次，要使<li>内联，你必须添加display:inline，现在写一下有一个拼写错误，你错过了D在DISPLAY！

所以完整的代码应该是

.sponsers ul {
margin: 0; padding: 0; 
display: inline;//you can remove this
list-style-type: none; list-style-image: none;
}

.sponsers li {
display: inline;
padding-right: 0px;
width: 900px;
list-style-type: none; list-style-image: none;
}

并在标记中

<div class="sponsers"> <!--You have ID here-->

<div>表示内联图片不能正常工作</div>

3 个答案: