0

我试图创建一张小图像幻灯片，并且在每张幻灯片上，图像水平均匀分布。在 css-tricks.com 上找到了一个有趣的技术和一个非常简单的工作示例，但我无法复制它。

这是幻灯片的html

<div class="item active">
  <div>
    <a href="#"><img src="http://placehold.it/100x100"></a>
    <a href="#"><img src="http://placehold.it/100x100"></a>
    <a href="#"><img src="http://placehold.it/100x100"></a>
    <a href="#"><img src="http://placehold.it/100x100"></a>
    <a href="#"><img src="http://placehold.it/100x100"></a>
    <a href="#"><img src="http://placehold.it/100x100"></a>
    <a href="#"><img src="http://placehold.it/100x100"></a>
  </div>
</div>

这是遵循上述技术的css

div.sites .carousel-inner .item div {
  font-size: 0.1px;
  text-align: justify;
}

div.sites .carousel-inner .item div:after {
  content: "";
  width: 100%;
  display: inline-block;
}

div.sites .carousel-inner .item div a {
  display: inline-block;
}

您可以在本网站底部的“OTROS SITIOS”标题下查看代码

编辑：我的女朋友在 CodePen 中尝试了我的代码，效果很好。我猜它一定是某种干扰它的全球风格。

谢谢你的帮助

4

1 回答 1

0

我从 div 站点开始复制 html 结构，并将其与您建议的 css 代码一起粘贴到 CodePen 上。我看到你错过了</a>和之间的转义字符<a>

当我添加它时，代码运行良好:)

于 2013-05-08T19:49:23.293 回答