当inline-block或者float失效的时候怎么弄

当我们想要元素水平排列的时候，inline-block或者float是最好的选择了，但是当父元素的宽高都设置了的时候，子元素会失效，如下：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

.item1 {
    background: red;
    width: 100%;
    height: 100px;
    display: inline-block
}

.item2 {
    width: 100%;
    height: 100px;
    display: inline-block;
    background-color: yellow;
}

</style> </head> <body> <div class="warp"> <div class="item1"></div> <div class="item2"></div> </div> </body> </html>

　　效果：

当inline-block或者float失效的时候怎么弄

很明显不是我们想要的效果，你把怎么解决呢，只需要一句代码即可：

  .warp {
            white-space: nowrap;
        }

　　当inline-block或者float失效的时候怎么弄