css - 如何使用 box-sizing: 带有 2 个内联元素的边框？

Question

我试图保持 2 个内联元素，用边框和填充保持 100% 的宽度，我尝试使用 box-sizing 但不起作用。怎么了？HTML：

<div class="content">
<aside class="left-nav">
<h2>Menu</h2>
</aside>
<section class="section-main">Test</section>
</div>

CSS：

.content {
box-sizing: border-box;
margin-top: 82px;
height: 1000px;
border: solid 2px green;
}
.left-nav {
box-sizing: border-box;
display: inline-block;
width: 20%;
border: 1px solid red;
}
.section-main {
box-sizing: border-box;
display: inline-block;
width: 80%;
border: 1px solid red;
}

JSFiddle：http: //jsfiddle.net/W7EJB/

Answer 1

这是inline-block element.Give font-size:0;的问题。到父元素。像这样写：

.content {
    box-sizing: border-box;
    margin-top: 82px;
    height: 1000px;
    border: solid 2px green;
    font-size:0;
}
.left-nav {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: inline-block;
    width: 20%;
    border: 1px solid red;
    font-size:16px;
}
.section-main {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: inline-block;
    width: 80%;
    border: 1px solid red;
    font-size:16px;
}

检查这个http://jsfiddle.net/W7EJB/1/