波旁纯水平对齐div后显示无

Question

我有一个包含3个元素的标题，采用全尺寸布局（12列网格）：

左=徽标（3列），中=导航（6列），右=社交媒体（3列

在较小的尺寸（4列网格）中，我将"社交媒体"设置为不显示，"徽标"one_answers"导航"都是两列。它们不是水平对齐的——第二个元素显示在第一个元素下方，两者都跨越两列，但不相邻。我试过漂浮、清理和所有的爵士乐，但没有乐趣。

这是HTML:

<header>
<div class="header">
    <a href="<!-- @path index.html/#page1 -->" id="logo">∆0Ω</a>
    <nav>
        <ul>
            <li class="nav-item"> <a href="<!-- @path index.html/#page1 -->">What?</a></li>
            <li class="nav-item"> <a href="<!-- @path // -->">How?</a></li>
            <li class="nav-item"> <a href="<!-- @path // -->">Work</a></li>
            <li class="nav-item"> <a href="<!-- @path // -->">Few!</a></li>
            <li class="nav-item hide"> <a href="//">Twitter</a></li>
            <li class="nav-item hide"> <a href="//">Facebook</a></li>
            <li class="nav-item hide"> <a href="//">LinkedIn</a></li>
        </ul>
    </nav>
    <div id="social">
        <ul>
            <li><a href="http://">t</a></li>
            <li><a href="http://">f</a></li>
            <li><a href="http://">in</a></li>
        </ul>
    </div>

</header>

这是scs:

header{

    background: tint(black, 70%);
    position: relative;
    width: 100%;
    top: 0;
    z-index:+100;

    @include large {
        position: fixed;
        height: 6.666666666666667%;
    }
}

.header {
        top: 0;
        height: 100%;
        @include outer-container;
        background: tint(black, 85%);
        text-align: center;
        z-index: +100;
    }

#logo {
    text-align: left;
    @include span-columns(2);
        @include large {
            @include span-columns(3);
          }
}
nav {
    @include span-columns(2);
    text-align: right;
        @include large {
            @include span-columns(6);
            text-align: center;
                    li {
                        display: inline-block;
                    }
                    .hide{
                        display: none;
                    }
          }
}

#social {
    display:none;
    @include large {
        @include span-columns(3);
        text-align: right;
            li {
                display: inline-block;
                }
         }
}

任何帮助都将是伟大的。

非常感谢，Alex

Answer 1

为了解决这个问题，我使用了omega（）include，将其添加到较小屏幕的nav元素中：

nav {
    @include span-columns(2);
    @include omega();
    text-align: right;
        @include large {
            @include span-columns(6);
            text-align: center;
                    li {
                        display: inline-block;
                    }
                    .hide{
                        display: none;
                    }
          }
}

现在我的徽标和导航在较小的屏幕尺寸上水平对齐。