19

コンテナー内にインライン ブロック要素があり、コンテナーの左上からすべて表示する必要があります。何らかの理由で、最初の要素が本来あるべき場所の下に表示されます。マージンとパディングのリセットを試みましたが、調べてみると、とにかくマージンやパディングはありません。

これがhtmlです（レイアウトを台無しにしないようにスペースはありません）：

 <div class='nav'><div class='logo'><p>test</p></div><ul><li><a href='#'>Link</a></li><li><a href='#'>Link</a></li><li><a href='#'>Link</a></li><li><a href='#'>Link</a></li><li><a href='#'>Link</a></li></ul></div>

ここにCSSがあります：

.nav {
    position: relative;
    width: 80%;
    height: 50px;
    background-color: red;
    z-index: 1;
}
.nav .logo {
    display: inline-block;
    width: 10%;
    height: 100%;
    background-color: #f90;

}
.nav ul {
    display: inline-block;
    width: 90%;
    text-align: center;
}
.nav li {
    display: inline-block;
    height: 100%;
    line-height: 50px;
    width: 20%;
    background-color: grey;
}
.nav li a {
    margin: 0;
}

問題を示すコードペンは次のとおりです。

http://codepen.io/Wryte/pen/Guavp

4

1 に答える 1

27

それらの垂直方向の配置がであるため、それらは整列されませんbaseline。それらを設定すると、topそれらは整列します。

.nav .logo {
    display: inline-block;
    vertical-align: top;
    width: 10%;
    height: 100%;
    background-color: #f90;

}
.nav ul {
    display: inline-block;
    vertical-align: top;
    width: 90%;
    text-align: center;
}

http://codepen.io/anon/pen/Kpthz

于 2013-03-22T01:15:15.117 に答える