Question

当通过添加::after规则强制一行文本或内联元素在其父元素中对齐时，我注意到父元素将在高度上扩展，以适应伪元素，即使我尝试防止它：

＆＃13;

.test {
    background-color:#ccc;
    text-align:justify;
}
.test:after {
    display:inline-block;
    content:'';
    width:100%;
    height:0;
}

＆＃13;

<div class="test">test 1 foo bar</div>

＆＃13;

http://jsfiddle.net/f4d7mr5t/

这是我到目前为止所尝试的内容以及它给我带来了什么（按照绝望的程度增加）：

height:0：无变化
line-height:0：无变化
overflow:hidden：无变化
上述2个或全部的组合：无变化
伪元素的负边距或填充：没有变化（据我所知，负填充无效，但此时我开始变得绝望）
white-space:nowrap：无变化
white-space:nowrap：打破了布局
position:relative;top:-100%：无变化
position:absolute：打破了布局

除了给父母一个固定的高度或使用flexbox之外的任何建议？

Answer 1

我知道如何解决一行文本的唯一方法是设置高度和行高：

.test {
    background-color:#ccc;
    text-align:justify;
    height: 1em;
    line-height: 1;
}
.test:after {
    display:inline-block;
    content:'';
    width:100%;
}

Answer 2

您的问题与：{false}元素上的display: inline-block有关。由于它是内联项，因此您还可以看到来自空白区域的一些效果。如果将其更改为display: block，则一切都按预期工作。

即使孩子没有身高，父母也会在身高上扩大

2 个答案: