0

代码:

<header class="header">
    <div class="logo">
        <a  href="#"><span>LOGO</span></a>
    </div>
    <nav class="nav">
        <ul>
            <li class="menu">111</li>
            <li class="menu">21222</li>
            <li class="menu">3333</li>
            <li class="menu">4444</li>
            <li class="menu">5555</li>
        </ul>
    </nav>
</header>

样式:

.header
        height 60px
        line-height 60px
        border 1px solid deeppink
        .logo
            height 60px
            display inline-block
        .nav
            display inline-block
            ul
                margin 0
                padding 0
                list-style none
                display inline-block
                li
                    width 80px
                    border 1px solid red

结果:

clipboard.png
为什么 LOGO 不在最上面(箭头指的位置)

1 个回答
0

已采纳

同一行的inline-block元素,类似行内元素,未设置vertical-align时,默认以baseline对齐。而当inline-block内有内容时,根据最后一行文字的baseline对齐,所以LOGO在5555旁边。
如果要让LOGO放在最上面,可以修改其对齐方式

.header
        height 60px
        line-height 60px
        border 1px solid deeppink
        .logo
            height 60px
            display inline-block
            vertical-align:top;
       

撰写答案

推广链接