css - 如何在浏览器屏幕中央对齐两个非固定宽度的 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 放在 child 身上。

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

JSFiddle