Question

我正在使用水平滚动框制作活动列表，每个框中都会列出信息。如何才能使文本和滚动条之间没有太多空间？

.scrollbox {
  overflow-x:scroll;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  width:750px;
  white-space:nowrap;
  background: white;
    align-content: center;
}

.elem {
  display:inline-block;
  width:200px;
  height:200px;
  margin:10px;
font-family: montserrat;
}

  <div class="scrollbox">
  <div class="elem"><p>What:</p><p>When:</p><p>Where:</p><p>Admission:</p>
        </div>
  <div class="elem"><p>What:</p><p>When:</p><p>Where:</p><p>Admission:</p></div>
  <div class="elem"><p>What:</p><p>When:</p><p>Where:</p><p>Admission:</p></div>
  <div class="elem"><p>What:</p><p>When:</p><p>Where:</p><p>Admission:</p></div>
  <div class="elem">X</div>
  <div class="elem">X</div>
  <div class="elem">X</div>
  <div class="elem">X</div>
  <div class="elem">X</div>
  <div class="elem">X</div>
  <div class="elem">X</div>
</div>
    </div>

Answer 1

您的问题似乎与readonly有关。尝试做：

vertical-align

我不知道你将使用什么，所以我不知道这究竟是什么对你有用。如果它最终破坏某些内容，请尝试将.elem { /* ... */ vertical-align: middle; }设置为vertical-align / text-bottom / text-top / bottom，然后查看是否可以解决此问题。

内有文本的水平滚动框

1 个答案: