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

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 的分辨率，假设比例正确，导航元素会笨拙地改变，使 View 看起来像这样:

<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 具有 block 显示，而 li 具有内联显示。这导致 nav/ul 周围有一个矩形 block ，避免了 2x3 布局的发生。正如 Jrod 在评论中指出的那样，您真正想要的是一个包含所有 li 项并让浏览器排列它们的矩形 block 。

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

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

请注意，此解决方案也可能会创建一个包含两个空单元格的 4x2 网格，因此请确保将外部 block 的宽度限制为三个 lis:

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