时间戳

首页 > 解决方案 > 使用骨架网格时如何将导航栏正确移动到徽标的右侧

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

问题描述

我正在使用骨架网格并使用 flexbox垂直对齐我的两列。text-align但是，这使我的导航更接近徽标图像，即使使用or也不会向右移动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;
    }
}

我现在得到的结果图像是这样的（徽标潦草）：

在此处输入图像描述

标签： htmlsassskeleton-css-boilerplate

解决方案

这可能是因为您在导航上使用了 flex 显示，它仅包含徽标和菜单所在的行。默认情况下使用弹性显示而不flex在子级中定义属性，将导致flex: 0 1 auto子级。这会将孩子的宽度削减回其孩子的组合宽度（即徽标和菜单），这就是为什么它们最终彼此如此接近的原因。

所以，为了解决这个问题，你要么想在行 div 中使用 flex 显示，然后使用 flexbox 属性指定宽度，删除骨架 css 类（它们不能很好地协同工作）。

或者，您可以使用skeleton-css 并在行div 中使用line-heights 和vertical-align 属性。暂时给你的 div 和其他元素一个不同的颜色是很有用的，这样你就可以看到发生了什么。

推荐阅读