垂直对齐容器内对齐的行内块元素

Question

我知道这个问题已经被问过好几次了，但是我找不到针对这种特定情况的解决方案。

所以，这就是我所拥有的： DEMO

基本上它是一个行列表：

<ul>
    <li>
        <label>
            <span>element1</span>
            <span>element2</span>
            <span>element3</span>
            <span>element4</span>
        </label>
    </li>
    <li>
        <label>
            <span>element1</span>
            <span>element2</span>
            <span>element3</span>
            <span>element4</span>
        </label>
    </li>
</ul>

而span 元素都是inline-blocks 和label 有text-align: justify。

一切都按预期工作，正如我所愿，但垂直对齐。所有的项目都附在顶部，有点。我认为这是空行之后通常的内联块烦恼，但我尝试将 font-size 设置为 0，或删除空格，但没有任何改变。

Answer 1

这似乎与line-height 有关——不知何故，它使伪元素占用了额外的空间。您可以通过为label 和li 设置line-height:0 来稍微减轻影响，然后再次为.product-row-price 设置line-height:1 ......但这仍然看起来不太好，它仍然留下一些底部的空间。 （并且较低的行高会使.product-row-price 中的文本重叠。）

我认为更好的解决方案是标签的负边距底部，并将溢出设置为隐藏：

.product-row-label {
    margin-bottom: -1.5em;
    overflow: hidden;
    /* rest of existing styles */
}

http://jsfiddle.net/db0onh6c/7/

仅供参考：span 中的 div 是无效的 HTML，因此您应该将 .product-row-price 内的那些 div 替换为 span 并使其阻塞。

虽然看起来还是不好看，因为第一列和第三列的内容宽度不同，使整个东西看起来不均匀，所以第二列的内容没有水平对齐。 （尽管可以避免为第一列和最后一列设置宽度，但如果您可以在第三列中“较短”值的右侧留出一点空间 - 像这样：http://jsfiddle.net/db0onh6c/8/）

Answer 2

也许您可以尝试将属性display: table; 设置为<label> 元素并将display:table-cell; 设置为您的<span>elements。此修复元素显示为<table> html 元素。只需正确修复填充和边距显示即可。

DEMO