Question

我正在使用骨架网格，并使用flexbox 垂直对齐了我的两列。但是，这使我的导航更加接近徽标图像，即使使用text-align或align也不会向右移动。

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>

SCSS：

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;
    }
}

我现在得到的结果图像是这样（徽标被s写了）：

Answer 1

这可能是因为您在导航栏中使用了弹性显示，该导航仅包含徽标和菜单所在的行。默认情况下，使用柔性显示而不在子级中定义flex属性，将为子级生成flex: 0 1 auto。这样会将孩子的宽度切回其孩子的总宽度（即徽标和菜单），这就是为什么他们彼此之间的距离如此之近。

因此，为了解决此问题，您要么要在行div中使用flex显示，然后使用flexbox属性指定宽度，然后删除skeleton-css类（它们不能很好地协同工作）。 / p>

或者，您可以使用骨骼CSS，并在行div中使用line-heights和vertical-align属性。暂时为div和其他元素赋予不同的颜色非常有用，这样您就可以看到会发生什么。

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

1 个答案: