Question

我希望孩子与其父母一致。父母较小，这就是导致问题的原因。 https://jsfiddle.net/mkvaL7uy

我在这里看到的唯一解决方案是给父级一个固定的宽度 - 使它真正宽+ height:0px，创建另一个元素来替换不可见的父级，然后孩子可以正确对齐。 https://jsfiddle.net/mkvaL7uy/1

还有其他非宽度依赖方法吗？

Answer 1

这里有一个答案：Centering div that is wider than its parent without setting negative left margin

答案也指向这个小提琴：http://jsfiddle.net/danield770/msVVD/2/。

或者，您可以使用两个元素之间的相对位置而不设置宽度规则。需要注意的是，inner始终取决于outer的宽度，inner永远不会比outer更窄：

＆＃13;

.outer {
    background: beige;
    display: inline;
    position: relative;
    text-align: center;
    margin-left: 100px;
}

.inner {
    background: pink;
    position: absolute;
    left: -50%;
    right: -50%;
}

＆＃13;

<div class="outer">
  This text is short.
  <div class="inner">This text is not much longer than the one above.</div>
</div>

＆＃13;

父文件小于子

1 个答案: