html - 如何将元素隐藏在 div 边界之外

Question

一开始我想说我只是学习前端，所以我需要帮助一些事情。

我想准备一些标签 slider 。 我的左右各有一些东西，所以我的选项卡 slider 将位于中间。

我的选项卡 slider 有两个按钮:< 和 >(向左滑动；向右滑动)。

在我的选项卡 slider 中有很多元素，其宽度总和超过父 div 的最大宽度(它具有“内容”类)。

我想隐藏所有超出父 div 边界的元素，所以我尝试使用

overflow: hidden;

但不幸的是，这些元素落到了第二行。

div.menu {
  width: 100%;
  display: block;
  float: left;
}

div.content {
  display: inline-block;
  width: 50%;
  max-width: 50%;
  background-color: lightgray;
  max-height: 40px;
  overflow: hidden;
}

div.left,
div.right {
  display: inline-block;
  width: 24%;
  background-color: green;
}

div.flex {
  display: flex;
}

ul,
li {
  display: inline-block;
}

li {
  background-color: yellow;
  width: 30px;
}

<div class="menu">
  <div class="left">something in left</div>
  <div class="content">
    <div class="flex">
      <i><</i>
      <ul>
        <li>i-1</li>
        <li>i-2</li>
        <li>i-3</li>
        <li>i-4</li>
        <li>i-5</li>
        <li>i-6</li>
        <li>i-7</li>
        <li>i-8</li>
        <li>i-9</li>
        <li>i-10</li>
        <li>i-11</li>
        <li>i-12</li>
        <li>i-13</li>
        <li>i-14</li>
        <li>i-15</li>
        <li>i-16</li>
      </ul>
      <i>></i>
    </div>
  </div>
  <div class="right">something in right</div>
</div>

我做错了什么？

我希望如果我使用 overflow 和 max-height 我超出的元素将被隐藏(在右侧 - 在一行上)并且不会落到第二行。

There is my example.

你能帮我吗？

Answer 1

您需要在 .flex 中使用 white-space: nowrap 以便所有元素保持在同一行

div.menu {
  width: 100%;
  display: block;
  float: left;
}

div.content {
  display: inline-block;
  width: 50%;
  max-width: 50%;
  background-color: lightgray;
  max-height: 40px;
  overflow: hidden;
}

div.left,
div.right {
  display: inline-block;
  width: 24%;
  background-color: green;
}

div.flex {
  display: flex;
  white-space: nowrap;
  position: relative;
}

ul {
  padding-left: 10px;
  padding-right: 10px;
}

ul,
li {
  display: inline-block;
}

li {
  background-color: yellow;
  width: 30px;
}

.flex i {
  position: absolute;
  top: 10px;
}

.flex i.prev {
  left: 0;
}

.flex i.next {
  right: 0;
}

<div class="menu">
  <div class="left">something in left</div>
  <div class="content">
    <div class="flex">
      <i class="prev"><</i>
      <ul>
        <li>i-1</li>
        <li>i-2</li>
        <li>i-3</li>
        <li>i-4</li>
        <li>i-5</li>
        <li>i-6</li>
        <li>i-7</li>
        <li>i-8</li>
        <li>i-9</li>
        <li>i-10</li>
        <li>i-11</li>
        <li>i-12</li>
      </ul>
      <i class="next">></i>
    </div>
  </div>
  <div class="right">something in right</div>
</div>