css相对定位将div分解为新行

Question

我对这个问题有以下小提琴：http://jsfiddle.net/jcb9xm44/

父div中有2个内联块div：

<div class="outer">
    <div class="inner1">
       Y
    </div>
    <div class="inner2">
        X
    </div>    
</div>

css为父div分配宽度，为子div分配2个宽度。

.outer {
    width: 210px;
    border: 1px solid red;
}

.inner1 {
    width: 200px;
    border: 1px solid orange;
    display: inline-block;
}
.inner2 {
    width: 50px;
    position:relative;
    left: -50x;
    display: inline-block;
    border: 1px solid lightblue;}

我原以为两个div都出现在同一行。虽然父母的宽度不足以容纳两个孩子，但由于第二个孩子有负偏移，所以应该可以将它们放在同一条线上。为什么会突破界线？

Answer 1

  

为什么会破坏这条线？

如你所说，这是因为父元素对于两个元素都不够宽。要更改此行为，您可以将white-space: nowrap添加到父元素，以防止inline-block元素换行。

Example Here

.outer {
    width: 210px;
    border: 1px solid red;
    position:relative;
    white-space: nowrap;
}

附注：

• 你有一个拼写错误 - left: -50x - ＆gt; left: -50px。
• inline个元素respect whitespace in the markup。
• 元素的边框包含在宽度计算中。使用box-sizing: border-box将其包含在内。
• 您也可以将margin-left: -50px用作Mary Melody pointed out。