防止浮动元素返回到下一行

Question

我有这个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/

Answer 1

您可以使用flexbox：

cin >> temp[i];

.container {
  width: 100px;
  overflow: auto;
  border: 1px solid #000;
}
.row {
  display: flex; /* Magic begins */
}
.row > .item {
  flex-shrink: 0; /* Don't shrink them */
  width: 32px;
  height: 32px;
  border: 1px solid #f00;
}

Answer 2

您可以模仿容器中的表

为了获得出色的跨浏览器兼容性，您可以使行和项的行为类似于容器中的本机表。

更新：通过在项目上设置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>