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

内联块元素有问题。给父元素 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/

如何使用box-sizing：带有2个内联元素的border-box？

1 个答案: