Css 即使在屏幕外，也要水平对齐div

我试着将div水平排列，即使它们离开屏幕。Im使用显示：框

<div id="container">   
   <div class="box">
       1
   </div>
   <div class="box">
       2
   </div>
   ....
   ....
</div>

.box{
    background-color: #7f94a7;
    color: #fff;
    height: 5.2rem;
    width: 6rem;
    display:table;
}

#container{
    display: box;
    display: -webkit-box;
}

1.
2.
....
....
.盒子{
背景色：#7f94a7；
颜色：#fff；
高度：5.2rem；
宽度：6雷姆；
显示：表格；
}
#容器{
显示：框；
显示：-网络工具包盒；
}

查看jsfiddle

---

这在chrome浏览器中运行良好，但在InternetExplorer10中，框是垂直对齐的……

更改您的

显示：框至
显示：内联框并使用
溢出：
保持或隐藏径流不可见

如上所述，
空白：nowrap关于内容修复问题

CSS:

不确定
display:table
在
.box
类上应该做什么——因为里面没有任何单元格或行，所以它根本不像table。表格框大小调整模型用于调整单元格的宽度。看看这个例子，可以看到
display:table
正在运行。。。调整输出面板的大小以查看发生的情况：

听起来你真的不想让盒子弯曲，而是想让它离开屏幕。为此，我们将这些框设置为使用
display:inline block
——这使它们在一行上彼此相邻。然后，我们告诉容器如何使用
空白：nowrap处理内联元素的空白

.box{
    display: inline-block;
}
#container {
    white-space: nowrap;
}

再次调整输出面板的大小以获得效果：--注意，我们得到了一个水平滚动条，框的大小没有变化

文档


MDN上的CSS
whitespace
CSS
在MDN上显示

尝试在子分区中使用“
显示：内联”
。保持宽度自动，即根据内容进行调整，在此处检查小提琴-

代码：


.box{
背景色：#7f94a7；
颜色：#fff；
高度：5.2rem；
宽度：6雷姆；
显示：内联；
填充：0.2米；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
尝试使用IE10的
-ms-
前缀和
flexbox
而不是box，以及firefox的
-moz-box
。。或者只需使用标准并包含在页面中，即可自动应用供应商前缀SUSUNG-ms box不起作用…@标记它是
-ms flexbox
更改
显示：box至
显示：内联框和使用
溢出：隐藏在包含的div上。防止额外的径流可见---OP不希望这样，请在编辑之前确保我理解。你想让盒子并排排列，不管盒子的数量有多大，你想让它们都可见吗？在我编辑答案之前@Mark正确吗？
.box{
    display:table-cell;
}
#container{
    display:table;
}

.box{
    display: inline-block;
}
#container {
    white-space: nowrap;
}