Css 响应式布局-导航元件定位

我刚开始使用响应性布局，有一个与导航元素相关的特定问题

如果我有这样一段代码：

<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是否能满足我的需要。

从您的描述中，我了解到您的

ul

s具有块显示，而

li

s具有内联显示。 这会导致nav/ul周围有一个矩形块，从而避免出现2x3布局。 正如Jrod在一篇评论中指出的那样，您真正想要的是一个矩形块，将所有li项包装起来，并让浏览器对其进行排列

您可以通过将所有lis放在一起来实现这一点，或者更好的方法是将ul和nav显示属性更改为“内联”，同时在两个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 */ }

---

您应该保留一个

nav

和一个

ul

。然后浮动

li

s并调整其大小，使其适合通过css确定的分辨率。例如，在1x6中，您根本不会浮动它们，而是可能应用100%的宽度，以允许它们彼此堆叠。