Question

我有一个列表，当我点击一个按钮时，它会用AJAX数据填充它，基本上是一个图像（这是简化的，因为问题不在于AJAX，而在于li元素）。

这是填充到列表中的内容：

<li class="ind-selector" name="dancing"><a href="#"><img src="screenshot.jpg"></a></li>

问题

当我点击我的号召性用语时，需要两次点击才能显示，当我在开发者控制台中调试时，图像实际上就在那里，但在高度为0时，li项也是如此。< / p>

当我删除li并只显示图片时，它每次都有效。

所以我的调试已经归结为：我90％肯定这是CSS的问题，这是我在列表项上使用的CSS：

列出商品

width: 235px !important;
display: block;
float: left;
list-style: none;
list-style-type: none;
margin-right: -1px;

图片

width: 235px;
display: block;
height: 100%;
-webkit-filter: brightness(60%);

使用最简化的jQuery追加：

$(".item-list-slider").append("<li class='ind-modular-selector' name='"+ elem.module_name + "'><a href='#'><img src='" + elem.module_img_src + "' /></a></li>");

我确定这是一个CSS问题，但我似乎无法弄清楚，有没有人有任何想法？双击按钮显示图像，但第一次点击和第二次点击时HTML / CSS完全相同！

Answer 1

这是因为您以百分比形式提供了图片height而没有在父级中定义它，尝试给它固定高度或在列表项中定义height。

＆＃13;

* {
  margin: 0;
  padding: 0
}

li {
  width: 235px !important;
  display: block;
  float: left;
  list-style: none;
  list-style-type: none;
  margin-right: -1px;
  background-color: blue;
  height: 200px;
}

img {
  width: 235px;
  display: block;
  height: 100%;
}

＆＃13;

<li><img src="http://placehold.it/350x150"></li>

＆＃13;

图像未在<li>中显示，直到第二次追加电话

1 个答案: