Question

我正在试图弄清楚如何让桌子有一个底部水平滚动条。这是我的HTML：

<div class="grid-block table">
  <div class="grid-block header"> 
    <div class="grid-block small-2 column"> 
      times 6
    </div>
  </div>
  <div class="grid-block row"> 
    <div class="grid-block small-2 column"> 
        times 6
    </div>
  </div>
</div>

我用过这个CSS认为它会解决我的问题。

.table {
    overflow: auto !important;
    width: 1400px !important;
}

我现在添加了重要内容，以确保应用这些样式。

我还应该指出，这里的每个元素都是一个弹性项目。

干杯

Answer 1

此代码可能会帮助您入门。

.wrapper {
  width: 100%;
  overflow: auto;
  white-space: nowrap;
  font-size: 0;
}
.wrapper .child {
  font-size: 1rem;
  height: 50px;
  width: 60px;
  display: inline-block;
  background-color: cornflowerblue;
  text-align: center;
  border: 1px solid coral;
  margin-left: 10px;
}
.wrapper .child:first-child {
  margin-left: 0px;
}

<div class="wrapper">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
  <div class="child">9</div>
  <div class="child">10</div>
</div>

使flexbox网格在移动设备上有一个水平滚动条

1 个答案: