Question

我正在帮朋友建立她的网站。在网页设计方面，我自己也是业余爱好者，导致无数的挫折感通常会通过几个小时的谷歌搜索来解决。但不是这次。我真的很努力地找到一个已有的答案而没有任何可用的解决方案。

“菜单”中的每个字母代表一项工作，点击它们切换包含图片/幻灯片的项目div。

我希望所有项目div都自己排列水平而不包裹到下面的行。这与我目前的星座有关。
我希望激活的项目自己浮动/对齐到左边（就像他们的container-div允许它们一样）。这只是部分工作：

切换'A'时，第一个项目弹出不错，并将其自身对齐到左侧。当'B'随后被切换时，它也很好地与左边对齐，靠在项目'A'上。同样地切换'C'+'D'也是如此。

当您切换，例如'D'作为第一选择时，问题就开始了：在这里，您将获得比预期更多的项目左侧空白区域。同时切换'A'然后'D'你会在项目之间产生一个奇怪的空白区域 - 而不是我期望或想要的任何东西。

你们的帮助吗？

Answer 1

尝试将以下样式添加到'.child'元素：

.child{
  float:left;
  margin-right:10px;
  display: inline-block;
  white-space: nowrap;
}

并在每次切换项目时为父div（#parent）指定宽度。所以每次添加一个项目时，它的宽度都会被添加到#parent的宽度，允许水平滚动。

希望这有帮助。