问题

Question

问题

我想在网格布局中有一个<pre>代码块。

这应该是响应性的。当空间很小时，它应该可以水平滚动。

我做了什么

body{
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto;
        grid-template-areas: "h h h h h h h h h h h h"
                             ". a a a a a a a a a a ."
                             "f f f f f f f f f f f f"
}
main{
        grid-area: a;
      }
pre{
        padding: 1em;
        overflow-x: scroll;
        background: #454649;
        color: white;
}

<body>
  <main>
    <pre><code>Footprint: 88C3 EC7D 458A BB70 B92F 35C1 72C2 CFAE 2E71 F6E2</code></pre>
  </main>
</body>

它是什么样的：

Picture: What it looks like

我想要的

它应该具有响应性，并且应该位于grid-area: a内部。

Picture: What I want

Answer 1

将主元素的min-width设置为0应该足够，请参见下文：

body{
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto;
        grid-template-areas: "h h h h h h h h h h h h"
                             ". a a a a a a a a a a ."
                             "f f f f f f f f f f f f"
}
main{
        grid-area: a;
        min-width: 0;
}
pre{
        padding: 1em;
        overflow-x: scroll;
        background: #454649;
        color: white;
}

<body>
  <main>
    <pre><code>Footprint: 88C3 EC7D 458A BB70 B92F 35C1 72C2 CFAE 2E71 F6E2</code></pre>
  </main>
</body>

Answer 2

根据功能要求制作东西。使用媒体查询以小型设备为目标并使溢出滚动的最佳方法。这是将代码放入您的CSS文件中的代码。

@media (min-width:320px) and (max-width:667px){
pre{
    width: 260px;
    overflow-x: scroll;
    padding: 20px;
    background: #ccc;
  }
 }

CSS网格预水平滚动

问题

我做了什么

它是什么样的：

我想要的

2 个答案: