html - Css: 不能改变 <li> 的大小

Question

我请 friend 帮我做网站，我必须自己完成。 我有一些小的截图框，我想改变它们的大小，但我没有成功。这些框用于选择要显示的屏幕截图。 我有一个 Firefox 插件，可以显示屏幕截图框的大小。而且它始终保持不变 - 25x25 像素。我更改了 CSS 代码但没有成功。 这是 HTML:

<ul class="imgzchoose">
<li><img src='data/images/screenshots/01.png' alt='' title='none'></li>
<li><img src='data/images/screenshots/02.png' alt='' title='none'></li>
<li><img src='data/images/screenshots/03.png' alt='' title='none'></li>
<li><img src='data/images/screenshots/04.png' alt='' title='none'></li>
<li><img src='data/images/screenshots/05.png' alt='' title='none'></li>
<li><img src='data/images/screenshots/06.png' alt='' title='none'></li>
<li><img src='data/images/screenshots/07.png' alt='' title='none'></li>

<li><img src='data/images/screenshots/08.png' alt='' title='none'></li>
</ul>

这是 CSS:

ul.imgzchoose{
margin-left: 110px;
padding-top:20px;
width:185px;
padding-bottom: 10px;
}

ul.imgzchoose li{
float:left;
position:relative;
overflow:hidden;
list-style:none;
margin: 5px 5px;
width: 50px;
height: 50px;
border: 1px solid #fff;
}

ul.imgzchoose li img{
cursor:pointer;
margin-left: 9px;
margin-top: 1px;
width:16px;
height:24px;
position:relative;
display:none;
}

可能是什么问题？

提前谢谢你。

Answer 1

阅读你的源代码我发现你正在使用一些名为 imgz.js 的脚本，该脚本声明如下:

if(typeof($imgz_thumb_w)== 'undefined'){$imgz_thumb_w = 25;}
if(typeof($imgz_thumb_h)== 'undefined'){$imgz_thumb_h = 25;}

这使得如果你没有明确定义图片的宽度和高度，它就会变成 25x25px

通过在图像中添加 width="24"和 height="16"来修复它

<li><img src='data/images/screenshots/01.png' alt='' title='none' width='24' height='16'></li>

这不是最好的方法，但如果您不想弄乱 imgz.js

，它是可行的