-1

境界線とパディングで 100% の幅を維持しながらインラインで 2 つの要素を維持しようとしています。ボックスのサイズ変更を使用しようとしましたが、機能していません。なにが問題ですか？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/

4

1 に答える 1

3

inline-block要素に問題があります。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/

于 2013-01-24T12:22:12.577 に答える