Question

我意识到这个问题（或者看起来像这样的问题）已经被一遍又一遍地问过，我觉得我已经阅读了所有这些问题而无济于事。我是新手，所以请耐心等待，我可能会因为这种挫折而忘记了列表元素的基本特征。这是我的问题......

我有一个带有不同大小拇指的缩略图库（我在页面加载时动态加载文件夹中的拇指）。缩略图库使用ul制作。当我将il的属性设置为内联，以便它们背靠背而不是在列表中时，li不会扩展以适应拇指。如果我将li显示更改回阻止（或删除显示），然后展开以适应内容...如果我使用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上的代码并且无法弄明白但是当我将显示更改为内联块时它起作用了。说真的，我以为我在最后一百万次更改中尝试了内联块 - 哦，现在可以正常工作:)非常感谢回复！

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

1 个答案: