Html 使用骨架网格时，如何将导航栏正确移动到徽标的右侧

我正在使用骨架网格，并使用flexbox使两列垂直对齐。但是，这使我的导航更接近徽标图像，即使使用

文本对齐

或

对齐

也不会向右移动

HTML：

<nav class="nav">
    <div class="row">
        <div class="one-third column">
            <img class="brand" src="img/logo.png" alt="Logo" />
        </div>
        <div class="two-thirds column" align="right">
            <span class="bars"><i class="material-icons">menu</i></span>
            <ul>
                <li><a href="#">LOL</a></li>
                <li><a href="#">LOL</a></li>
                <li><a href="#">LOL</a></li>
                <li><a href="#">LOL</a></li>
                <li><a href="#">LOL</a></li>
            </ul>
        </div>
    </div>
</nav>

我现在看到的结果是这样的（草草画出的徽标）：

---

这可能是因为您在导航上使用了flex显示屏，它只包含标识和菜单所在的行。默认情况下，使用flex显示而不在子项中定义

flex

属性，将导致子项的

flex:0 1 auto

。这会将子对象的宽度削减回其子对象（即徽标和菜单）的组合宽度，这就是它们彼此如此接近的原因

因此，为了解决这个问题，您可以在row div中使用flex显示，然后使用flexbox属性指定宽度，删除骨架css类（它们不能很好地协同工作）

或者，您可以使用骨架css，并在行div中使用线条高度和垂直对齐属性。临时为div和其他元素指定不同的颜色非常有用，这样您就可以看到发生了什么

nav.nav {
    display: flex;
    align-items: center;

    .brand {
        width: 200px;
    }

    ul {
        width: 100%;
        margin: 20px;
        list-style: none;
        text-align: right;

        li {
            display: inline-block;
            margin: 0;

            a {
                display: block;
                text-decoration: none;
                color: inherit;
                text-transform: uppercase;
                letter-spacing: 2px;
                padding: 12px 16px;
                border-bottom: 2px solid lighten($foreground-colour, 30);;
                margin-right: -5px;
            }
            a:hover {
                color: lighten($foreground-colour, 30);
                border-bottom-color: red;
            }
        }
    }

    .bars {
        display: none;
    }
}