Question

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

我想准备一些标签滑块。我左右有东西，所以我的标签滑块将居中。

我的标签滑块有两个按钮：<和>（向左滑动；向右滑动）。

在我的标签滑块中，有很多元素的宽度总和超过父div的最大宽度（它具有“ content”类）。

我想隐藏父div范围之外的所有元素，所以我尝试使用

溢出：隐藏；

但不幸的是，这些元素排在第二行。

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

您需要在white-space: nowrap中使用.flex，以便所有项目都保持在同一行

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>

如何将元素隐藏在div范围之外

1 个答案: