css - 如何让 li 扩展以适应缩略图内容？

Question

我意识到这个问题(或看起来像这样的问题)已经被一遍又一遍地问过，我觉得我已经阅读了所有这些问题但毫无用处。我对此很陌生，所以请多多包涵，可能是由于这种挫败感，我忘记了列表元素的基本性质。这是我的问题...

我有一个缩略图库，其中包含不同大小的缩略图(我在页面加载时从文件夹中动态加载缩略图)。缩略图库是使用 ul 制作的。当我将 il 的属性设置为内联以便它们背对背运行而不是在列表中时，li 不会扩展以适应其中的拇指。如果我将 li 显示改回 block (或删除显示)，然后它们会扩展以适合内容...如果我使用 display: inline-block li 内容缩略图缩小以适合 li 但 li 仍然比图片...arg!

如何在不指定大小的情况下让 il 扩展以适应内容？

这是我的 CSS:

.gallery {
width: 100%;
cursor: default;

overflow:hidden;
}
.gallery ul {
list-style:none outside none;
overflow:hidden;
}
.gallery li {
background: #eee;
border-color: #ddd #bbb #aaa #ccc;
border-style: solid;
border-width: 1px;
color: inherit; 

margin: 3px;
padding: 5px;   

display:inline; 
position: relative;
vertical-align:top;

overflow:hidden;
}

这是加载后的代码示例:

<div class="gallery">
 <ul>
  <li><a href="brown.png"><img src="/photos/brown.png" alt="" /></a></li>
  <li><a href="blue.png"><img src="/photos/blue.png" alt="" /></a></li>
  <li><a href="light-blue.png"><img src="./photos/light-blue.png" alt="" /></a></li>
 </ul>
</div>

因此，当我查看页面时，我会看到如下内容:

         __             __
<   ----|  |----   ----|  |----
<   ----|__|----   ----|__|----

中心框代表 img 元素，背景中较小的虚线矩形是父 li 元素。 (对不起，我不能发布照片，因为我是新手 :))

有没有人有什么想法？

提前致谢!!

Answer 1

大卫谢谢!! - 我只是查看了您放在 JS Fiddle 上的代码，但无法弄清楚，但是当我将显示更改为内联 block 时，它起作用了。说真的，我以为我在最后一百万次更改中的某个时候尝试了 inline-block - 哦，它现在可以工作了:)非常感谢您的回复!!!