html - 将 div 水平对齐成一行

Question

我遇到了一个场景，我有一个父容器，里面有很多 div，我需要在一行中显示它们。

要求是:

1. div 的数量会改变
2. 每个元素的宽度会有所不同
3. 应该有一个水平滚动条，我们可以在其中滑动和选择元素。

我尝试了多种解决方案，但没有任何效果符合预期。当我尝试为子 div 使用 display:inline-table 时，它在 PC 上工作但在 Iphone 上失败。

代码如下:

.container {
  background-color: #fff;
  border-top: 1px solid grey;
  display: flex;
  overflow: -moz-scrollbars-none;
  overflow-x: scroll !important;
  }
.child {
  display: inline-table;
  }

<div class="container">
  <div class="child">Shirt</div>
  <div class="child">Jeans</div>
  .
  .
  .
  .
  .
  .
  <div class="child">Swetter</div>
  <div class="child">T-shirts<div>
 <div>
   

谁能帮我解决这个问题？

Answer 1

• 我为父元素使用了 white-space: nowrap;，它通过添加滚动条水平对齐子元素
• 在下面的示例中，任何子项都可以不存在，宽度可以不同我使用了内容的宽度 display:inline-block

.parent {
  border: 1px solid green;
  overflow: auto; /* change to overflow-x: scroll if you want to show scrollar if less elements */
  padding: 5px;
  white-space: nowrap;
}
.parent > div {
  border: 1px solid red;
  display: inline-block;
  padding: 5px;
}

<div class='parent'>
  <div>one</div>
  <div>threeeee</div>
  <div>fiveeeeeeeeee</div>
  <div>one</div>
  <div>threeeee</div>
  <div>fiveeeeeeeeee</div>
  <div>one</div>
  <div>threeeee</div>
  <div>fiveeeeeeeeee</div>
  <div>one</div>
  <div>threeeee</div>
  <div>fiveeeeeeeeee</div>
  <div>one</div>
  <div>threeeee</div>
  <div>fiveeeeeeeeee</div>
  <div>one</div>
  <div>threeeee</div>
  <div>fiveeeeeeeeee</div>
</div>