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就不行，哪位高手知道跟我說一下，謝謝！