Question

我是HTML＆amp; CSS。我制作了多张桌子，希望在一个盒子里的一行上显示它们。我尝试了以下但这似乎不起作用。有人可以解决这个问题吗？这是我的CSS代码：

#content2{
   margin: 30px 0;
   background: white;
   padding: 20px;
   clear: both;
   box-shadow: 0px 1px 1px #999;
   text-align: center;
   overflow:hidden;

}

table{
  margin-right: auto;
  margin-left: auto;
  float:left;
}
td,th{
  padding: 20px;
}

HTML应该是正确的。

Answer 1

使用float: left

，而不是使用display: inline-block，而是将表格显示为内联

Example

请注意，这样会使table元素无法获得默认的全宽（您可能不想开始使用）。

Answer 2

您有一些我知道的选项。

1。如果你想要它纯粹的CSS和“动态”（即你事先不知道宽度），你可以将表设置为display: inline-block并删除你的浮动。这适用于chrome，但您可能会遇到IE问题，尤其是旧版本。

http://jsfiddle.net/ZfX2M/

2。如果你知道宽度，那么设置一个内容div与该宽度，margin:auto它。

http://jsfiddle.net/AuF7z/1/

3。如果你不知道宽度，但是你很乐意使用JS，那么就像上面一样，但是在JS中计算宽度（我使用jQuery作为它的习惯，但你可以使用原始JS）

http://jsfiddle.net/mVADm/1/

在CSS中居中多个表

2 个答案: