代码之家 › 专栏 › 技术社区 › madcrazydrumma

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

skeleton-css-boilerplate sass html

-1

madcrazydrumma · 技术社区 · 6 年前

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


   
    
     
      HTML:。
     
     <nav class=“nav”>
<DIV class=“row”>
<DIV class=“1/3列”>
<img class=“brand”src=“img/logo.png”alt=“logo”/>
</DIV>
<div class=“two-third column”align=“right”>
<span class=“bars”><i class=“material icons”>菜单</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{
显示器:柔性;
项目对齐:居中;

.品牌{
宽度:200px;
}

保险商实验室{
宽度:100%;
裕度:20px;
列表样式:无;
文本对齐:右对齐;

李{
显示:内联块;
边距:0;

A{
显示:块;
文字装饰:无;
颜色:继承;
文本转换:大写;
字母间距:2px;
填料:12px 16px;
边框底部:2倍纯色亮色(前景色,30美元);
右边距:-5px;
}
A:悬停{
颜色:亮色(前景颜色,30美元);
边框底色:红色;
}
}
}

.钢筋{
显示:无;
}
}

我现在得到的结果图像是这样的(草草画出的标志):。

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


我现在得到的结果图像是这样的(草草画出的标志):

1 回复 | 直到 6 年前

Evelijn 6 年前

flex flex: 0 1 auto