Как скрыть элементы за пределами границ - PullRequest
Новая
       7

Как скрыть элементы за пределами границ

0 голосов
/ 28 июня 2018

В начале я хочу сказать, что я просто изучаю интерфейс, поэтому мне нужно чем-то помочь.

Я хочу подготовить слайдер для вкладок. У меня есть что-то слева и справа, поэтому мой слайдер будет в центре.

У моего ползунка вкладок есть две кнопки: <и> (сдвинуть влево; сдвинуть вправо).

В моем слайдере вкладок много элементов, у которых сумма ширин превышает максимальную ширину родительского 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>

Что я делаю не так?

Я ожидаю, что, если я буду использовать переполнение и максимальную высоту, мои элементы превышения будут скрыты (справа - в одном ряду) и не упадут во второй ряд.

Вот мой пример.

Ты мне поможешь с этим?

1 Ответ

0 голосов
/ 28 июня 2018

Вам необходимо использовать 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>
...