如何在浏览器屏幕中央对齐两个非固定宽度的div？

Question

我想在屏幕中央对齐两个非固定宽度的 div，并且希望它们都出现在同一水平面上。我希望左 div 的右边缘和右 div 的左边缘之间没有边距。所以我就做了这个……

<div id="container">
   <div id="left"><%= render 'form' %></div>
   <div id="right"><%= render 'totals' %></div>
</div>

然后添加这个CSS

#container {
   display: block;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
}

#left {
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   background-color: green;
   float: left;
   display: inline-block;
}

#right {
   float: right;
   background-color: red;
   display: inline-block;
}

但令人失望的是，左侧的 DIV 出现在浏览器屏幕的最左侧，右侧的 div 出现在浏览器的最右侧（在 Mac 上使用 Chrome），并且 DIV 之间有很大的空间）。我该如何纠正上述内容以消除它们之间的空间？

Answer 1

摆脱你的漂浮物。然后将

font-size: 0

放在

#container

上，将

font-size: 16px

放在孩子们身上。

#container {
   font-size: 0;
}
#left, #right {
   font-size: 16px; //You can use font-size: initial if you don't care about IE
}

JSFiddle