Html 水平滚动框不显示所有元素

发布于12月08日

如何使水平滚动框以从左向右滚动的方式显示所有元素？

Currently i've got this result: some elements are not visible inside and can't be scrolled more to the left

.tags {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow-x: scroll;
  width: 100%;
}

.tag {
  padding: 10px;
  border: 3px solid rgba(0, 0, 0, 0.07);
  background-color: rgba(0, 0, 0, 0.03);
  border-radius: 5px;
}

<div class="tags">
  <div class="tag">JavaScript</div>
  <div class="tag">HTML</div>
  <div class="tag">CSS</div>
  <div class="tag">CSS</div>
  <div class="tag">CSS</div>
  <div class="tag">CSS</div>
  <div class="tag">CSS</div>
  <div class="tag">CSS</div>
  <div class="tag">CSS</div>
  <div class="tag">CSS</div>
  <div class="tag">CSS</div>
  <div class="tag">CSS</div>
  <div class="tag">CSS</div>
  <div class="tag">CSS</div>
  <div class="tag">CSS</div>
  <div class="tag">CSS</div>
  <div class="tag">CSS</div>
  <div class="tag">CSS</div>
  <div class="tag">CSS</div>
  <div class="tag">CSS</div>
</div>

Html 水平滚动框不显示所有元素

推荐答案

Html相关问答推荐

z—index总是 destruct 我的头，我该如何修复它？

单表单和多个提交(具有多个值)

Font Awesome 6插入符号未显示

邮箱追踪器-有效，但在Gmail客户端中是否可以显示问号图标以外的其他内容？

将2个Flex列合并为1个交替子列

Tailwind CSS：overflow-y Property Not Scrolling Unreliably to Bottom with top-[63px]

如何将功能附加到嵌入式药剂中的按钮？

旧文本淡出，但新文本不会淡入，而是突然出现

为什么要添加换行符(至少在 Google Chrome 中)

在屏幕上每行 css 中的特定列居中

调整 Rmarkdown 输出的 html_document 的标题和副标题之间的间距

：：可点击图标之前

如何将内容放置在侧边栏旁边？

对齐页面左侧的单选按钮

为什么 css position：fixed 不适用于对话框标签？

如何制作一个布局，其中左侧固定为图像，右侧为按钮，中心或中间位置为文本？

如何在div中设计伪元素？

如何让 backdrop-filter： blur() 效果在 iOS 上运行？

让 Iframe 覆盖整个页面

无法从社交栏中 Select 选项