html - 为 anchor、li 和 span 设置相同的高度

Question

我正在尝试构建这样的屏幕:

我怎样才能让我的 span 和 anchor 元素的高度增长到与 li 的高度相同？

我已经从这个例子开始了 http://jsfiddle.net/Gh6mB/1/

我的中心列应该在高度和宽度上扩展。左右栏的高度应扩大，但宽度应保持固定。

有什么我可以做的来简化这个吗？

Answer 1

我修改了 css 以匹配 <table><tbody><tr><td>结构，因为你有一个四层嵌套。我不得不添加一个包装器 div到 li 之间的第一个表和 span小号:

http://jsfiddle.net/Gh6mB/8/

#ListaEventosPorMes ul.vermelho {
    display: table;
}

#ListaEventosPorMes ul.vermelho li {
    display: table-row-group;
}

#ListaEventosPorMes ul.vermelho li div,
#ListaEventosPorMes ul.vermelho li a {
    display: table-row;
}

#ListaEventosPorMes ul.vermelho li   span {
    display: table-cell;
    height: 74px;    
}