CSS：div 和 display:table；在列表元素中没有自动高度？

Question

我有一个无序列表 ul li，其中每个 li 都是浮动的，但由于将 overflow:hidden; 设置为列表项而具有高度值。

因此，当在 webinspector 中将元素悬停时，列表项显然具有 288px 的高度值。

在每个 li 中，我还有一个具有以下属性的 div.caption：

.caption {
  opacity: 0;
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  width: 101%;
  text-align: center;
  background-color: rgba(0,0,0,.6);
  display: table;
}

<li>
  <a href="#"><img src="#"></a>
  <div class="caption">some more elements in here</div>
</li>

上面提到的list-item的高度是li内图片高度自动决定的。（webinspector 清楚地显示 list-item 有一个高度）

但是我的 .caption div 在 li 中并没有自动和父级一样高。我希望 div.caption 与列表项一样高 100%。

我可以在这里做什么？

示例：http://jsfiddle.net/rgwcL8qt/1/叠加层应始终覆盖整个图像。

Answer 1

尝试添加

<div style="clear: both"></div>

在 div 的末尾包含 .caption class。

Answer 2

添加 div.caption {bottom:0; display:block;}

Fiddel

Answer 3

div.caption { display: table } with div.caption-in { display: table-cell } 创建一个新的块格式化上下文。

更改为 div.caption { display: block; } 应该可以解决您的问题。

编辑：如果您需要将标题中的内容居中 div，那么您应该采取不同的方法：

.caption:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.3em;
}
.caption {
    opacity: 0;
    z-index: 1;
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    width: 101%;
    text-align: center;
    background-color: rgba(0,0,0,.6);
    display: block;
    cursor: pointer;       
}
.caption-in {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

http://jsfiddle.net/vmg8jfed/

CSS：div 和 display:table；在列表元素中没有自动高度？

CSS: div with display:table; within a list element no auto height?

html

css

css-tables