Question

我刚开始使用自适应布局，并且有一个与导航元素相关的特定问题。

如果我有这样的代码块：

<nav>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</nav>
<nav>
    <ul>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</nav>

在高分辨率计算机屏幕上查看时，我们会有一个由导航器创建的2x3网格。也就是说，每个导航将在其自己的“线”上，并且每个导航的所有三个元素将在彼此的右侧或左侧。

使用响应式布局，如果窗口的大小显着缩小，比如iPhone的分辨率，假设比例正确，导航元素会不会发生变化，以致该视图看起来像：

<nav>
    <ul>
        <li>1</li>
        <li>2</li>
    </ul>
</nav>
<nav>
    <ul>
        <li>3</li>
    </ul>
</nav>
<nav>
    <ul>
        <li>4</li>
        <li>5</li>
    </ul>
</nav>
<nav>
    <ul>
        <li>6</li>
    </ul>
</nav>

我只是在寻找对这种新布局实践如何专门用于导航元素的高级理解。我希望为我正在制作的网站创建这样的东西，但是如果要发生这种情况，我想创建一些代码，这样我就可以在高分辨率下使用2x3矩阵，在低分辨率下使用3x2矩阵，移动到6x1极小的分辨率。

如果是这种情况，有没有办法为特定的屏幕分辨率指定不同的HTML？我知道我们可以为不同的分辨率指定特定的CSS，但在这种情况下我不确定改变CSS会做我需要做的事情。

Answer 1

根据您的说明我了解到您的ul有块显示，而li有内联显示。这会导致nav / ul在其周围有一个矩形块，从而避免发生2x3布局。正如Jrod在评论中指出的那样，你真正想要的是一个包裹所有礼物的矩形块，并让浏览器对它们进行排列。

您可以通过将所有lis放在一起来实现这一点，或者通过将ul和nav显示属性更改为内联更好，同时在两个导航周围放置一个容器，以确保它们最终按块分组。

div.container { display: block; }
nav, ul, li { display: inline; }

请注意，此解决方案还可能会创建一个带有两个空单元格的4x2网格，因此请确保将外部块限制为三个lis的宽度：

li { width: 150px; /* or whatever */ }
div.container { max-width: 450px; /* three lis at most */ }

响应式布局 - 导航元素定位

1 个答案: