使用骨架网格时如何将导航栏正确移动到徽标右侧
How can I properly move my navbar to the right of my logo when using Skeleton grid
我正在使用骨架网格并垂直对齐 我的两列使用 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;
}
}
我现在得到的结果图是这样的(标志是潦草的):
这可能是因为您在导航上使用了 flex 显示,它只包含徽标和菜单所在的行。默认情况下使用 flex 显示而不定义子项中的 flex
属性,将导致子项为 flex: 0 1 auto
。这会将子项的宽度缩小到其子项(即徽标和菜单)的组合宽度,这就是为什么它们最终彼此如此接近的原因。
因此,为了解决这个问题,您要么想在 div 行中使用 flex 显示,然后使用 flexbox 属性指定宽度,删除骨架-css 类(它们不能很好地协同工作)。
或者,您可以使用 skeleton-css 并在行 div 中使用 line-heights 和 vertical-align 属性。暂时给 div 和其他元素不同的颜色很有用,这样您就可以看到会发生什么。
我正在使用骨架网格并垂直对齐 我的两列使用 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;
}
}
我现在得到的结果图是这样的(标志是潦草的):
这可能是因为您在导航上使用了 flex 显示,它只包含徽标和菜单所在的行。默认情况下使用 flex 显示而不定义子项中的 flex
属性,将导致子项为 flex: 0 1 auto
。这会将子项的宽度缩小到其子项(即徽标和菜单)的组合宽度,这就是为什么它们最终彼此如此接近的原因。
因此,为了解决这个问题,您要么想在 div 行中使用 flex 显示,然后使用 flexbox 属性指定宽度,删除骨架-css 类(它们不能很好地协同工作)。
或者,您可以使用 skeleton-css 并在行 div 中使用 line-heights 和 vertical-align 属性。暂时给 div 和其他元素不同的颜色很有用,这样您就可以看到会发生什么。