Question

我想知道如何完成this site导航的方式 - 大约60em它堆叠成6个区块，文本居中，图标位于顶部，我想完成相同的操作，4到6调整大小到60em时我的导航中的块。

我很感激帮助

  <header class="header">

            <nav class="nav">
        <ul>
                <li>Home</li>
                <li>Home</li>
                <li>Home</li>
                <li>Home</li>
        </ul>
    </nav>


 </header>

CSS

nav {text-align: center;} 
nav ul li { display: inline-block;}

Answer 1

他们正在使用media queries。你熟悉这些吗？

他们的断点位于60em。因此，在他们的样式表中，他们有媒体查询，在视口位于60em下的条件下，对相同元素进行不同的样式设置。例如，带有类ul的标记中的nav使此媒体查询具有条件和结果样式：

@media screen and (max-width: 60em)
header .nav {
width: 100%;
float: left;
}

即。当视口位于60em DOM元素中nav元素内的header元素时，其宽度为100％且向左浮动。

修改

如果您询问如何专门堆叠元素，则可以只留下float个元素，当元素宽度超过容器宽度时，它们将断开并下拉到容器内第一个浮动元素下方。因此，如果您有四个元素，则需要使用以下内容对其进行样式设置：

ul.nav li {
float:left;
width:50%;
}

如果这不起作用，请确保您的元素完全是50％。边距，边框，填充都会影响元素的宽度，如果超过50％，它们将叠加在一起。如果由于某种原因显示为table，则标记中的空格（HTML文件）也会影响宽度。

我更新了你的小提琴，所以你可以看到一个有效的例子：http://jsfiddle.net/QAEQ3/1/

响应式导航菜单与块

1 个答案:

修改