html - 防止float元素返回下一行

我有这个HTML：

<div class="container">
    <div class="row">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
        <div class="row">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
        <div class="row">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

我要阻止行中包含的项返回行。
这里是CSS：

.container {
    width: 500px;
    overflow: auto;
    border: 1px solid #000;
}

.container .row:after {
    content:"";
    display:table;
    clear:both;
}

.row .item {
    float: left;
    width: 32px;
    height: 32px;
    border: 1px solid #f00;
}

我试图将float元素更改为inline block和nowrap，但行之间的空格有问题。我使用React，所以我不知道如何删除代码中的空格，或者在<div/>之间插入注释。
下面是一个JSFiddle示例：http://jsfiddle.net/Cronos87/69aoghaq/

最佳答案

可以在容器中模拟表
为了获得更好的跨浏览器兼容性，可以使行和项的行为类似于容器中的本机表。
更新：通过在项目上设置min-width，您可以强制每个类似表的行在容器中展开，如有必要，可以生成滚动条。

.container {
    border: 1px solid #000;
    width: 100px;
    overflow: auto;
}

.container .row {
    display: table;
}

.container .item {
    display: table-cell;
    min-width: 32px;
    height: 32px;
    border: 1px solid #f00;
}

<div class="container">
    <div class="row">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="row">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="row">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>