主页 / 问题 / 1094009
Accepted
Kirzzz
Asked:2020-03-13 03:56:20 +0800 CST2020-03-13 03:56:20 +0800 CST

如何在网格中制作滚动项目？

  • 772

有一个 Grid 网格，我们可以在其中动态添加元素（从 1 到 31，具体取决于月份和日期）。我希望当元素的数量超过 X 值时，它们的滚动出现，而不是换行符。我该如何实施？（我知道你可以通过 Javascript 来做到这一点，方法是在侧面添加按钮进行滚动，但也许有办法不用它？）

css3

1 个回答

  1. Best Answer

    如果我正确理解问题，您可以这样做。使用了 flexbox，但您可以更改为网格

    .line {
  position: relative;
  border: 1px solid #ececec;
  overflow-x: scroll;
  overflow-y: hidden;
  margin: 10px 0;
  height: 100px;
  padding:0;
}

.line.example1 {width: 275px;}
.line.example2 {width: 100%;}

.wrapper {
  position: absolute;
}

ul {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  margin:0;
  padding:0;
}

ul li {
  display: block;
  width: 100px;
  height: 100px;
  margin: 0 0 0 1px;
}

.line.example1 li {background-color: silver}
.line.example2 li {background-color: lightgreen}
    <div class="line example1">
  <div class="wrapper">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

<div class="line example2">
  <div class="wrapper">
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

    • 1

相关问题