我有一个包含3个元素的标题,全尺寸布局(12列网格):
left = logo(3列),middle = nav(6列),right =社交媒体(3列)
在较小的尺寸(4列网格)中,我将“社交媒体”设置为不显示,“logo”和“nav”都是两列。它们没有水平对齐,第二个元素显示在第一个跨越两列但不是彼此相邻的情况下。我试过浮动,清理和所有爵士乐,但没有快乐。
这是HTML:
<header>
<div class="header">
<a href="<!-- @path index.html/#page1 -->" id="logo">∆0Ω</a>
<nav>
<ul>
<li class="nav-item"> <a href="<!-- @path index.html/#page1 -->">What?</a></li>
<li class="nav-item"> <a href="<!-- @path // -->">How?</a></li>
<li class="nav-item"> <a href="<!-- @path // -->">Work</a></li>
<li class="nav-item"> <a href="<!-- @path // -->">Few!</a></li>
<li class="nav-item hide"> <a href="//">Twitter</a></li>
<li class="nav-item hide"> <a href="//">Facebook</a></li>
<li class="nav-item hide"> <a href="//">LinkedIn</a></li>
</ul>
</nav>
<div id="social">
<ul>
<li><a href="http://">t</a></li>
<li><a href="http://">f</a></li>
<li><a href="http://">in</a></li>
</ul>
</div>
</header>
这是scss:
header{
background: tint(black, 70%);
position: relative;
width: 100%;
top: 0;
z-index:+100;
@include large {
position: fixed;
height: 6.666666666666667%;
}
}
.header {
top: 0;
height: 100%;
@include outer-container;
background: tint(black, 85%);
text-align: center;
z-index: +100;
}
#logo {
text-align: left;
@include span-columns(2);
@include large {
@include span-columns(3);
}
}
nav {
@include span-columns(2);
text-align: right;
@include large {
@include span-columns(6);
text-align: center;
li {
display: inline-block;
}
.hide{
display: none;
}
}
}
#social {
display:none;
@include large {
@include span-columns(3);
text-align: right;
li {
display: inline-block;
}
}
}
任何帮助都会很棒。
非常感谢, 亚历
答案 0 :(得分:1)
为了解决这个问题,我使用了omega()include,将它添加到nav元素中以获得更小的屏幕:
nav {
@include span-columns(2);
@include omega();
text-align: right;
@include large {
@include span-columns(6);
text-align: center;
li {
display: inline-block;
}
.hide{
display: none;
}
}
}
现在我的徽标和导航按照较小的屏幕尺寸水平对齐。