当我们想要元素水平排列的时候，inline-block或者float是最好的选择了，但是当父元素的宽高都设置了的时候，子元素会失效，如下：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.item1 {
background: red;
100%;
height: 100px;
display: inline-block
}
.item2 {
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>
效果：
很明显不是我们想要的效果，你把怎么解决呢，只需要一句代码即可：
.warp {
white-space: nowrap;
}
