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有关 - 不知何故，它会使伪元素占用额外的空间。您可以通过为line-height:0和label设置li，然后再为line-height:1设置.product-row-price来缓解效果......但是仍然没有看起来不错，它仍然在底部留下一些空间。（较低的行高会使.product-row-price中的文本重叠。）

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

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

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

仅供参考：div中的span是无效的HTML - 因此您应该使用跨度替换.product-row-price内的div并将其阻止。

但是看起来并不漂亮，因为第一列和第三列中内容的不同宽度使得整个内容看起来不均匀，因此第二列中的内容不会水平对齐。（虽然第一列和最后一列的设置宽度可以避免，但如果你在第三列的“较短”值的右边有一点空间，那么就像这样：http://jsfiddle.net/db0onh6c/8/）

Answer 2

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

DEMO

在容器内垂直对齐对齐的内联块元素

2 个答案: