将div水平对齐

Question

我遇到了一个场景，其中我有一个父容器，里面会有一些div，我需要在一行显示。

要求是：

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

我尝试了多种解决方案，但没有任何工作正常。当我尝试使用display:inline-table作为子div时，它在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;作为父级，通过添加滚动条来水平对齐子元素
• 在下面的例子中我可以使用任何no的孩子而且宽度可以不同我使用display:inline-block
使用了内容的宽度

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;