css之超出部分不换行且显示横向滚动条

我不是专业前端，所以折腾了老半天啊QAQ

 

需求是两个div,内层div不换行且超出时外层div显示横向滚动条

类似以下这种：

刚开始的代码如下：

<div class="nowrap">

    <div class="item-t"></div>

    <div class="item-t"></div>

    <div class="item-t"></div>

    <div class="item-t"></div>

</div>

css样式：

.nowrap{

white-space: nowrap;

overflow-x: scroll;

height: 200px;

}

.item-t{

display: inline;

float: left;

width: 108px;

height: 200px;

background: yellow;

vertical-align: top;

}

.item-t+.item-t{

margin-left: 15px;

}

这个完全没办法达到要求，那个white-space：nowarp像死了一样不起作用，各种试验，最后的版本：

.item-t{

display: inline-block;　　

width: 108px;

height: 200px;

background: yellow;

vertical-align: top;

}

我只贴出了修改部分，为啥加了float就不行，哪位高手知道跟我说一下，谢谢！