Как сделать блоки без переноса

Question

Есть код:

.outer {
  width: 300px;
  background: red;
  overflow-x: scroll;
}

.inner {
  width: 800px;
}

span {
  display: inline-block;
  background: yellow;
  width: 100px;
  height: 100px;
  margin: 10px;
}

<div class='outer'>
  <div class='inner'>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

Как мне сделать при помощи CSS чтобы ширина блока .inner автоматически подстраивалась и чтобы блоки span шли одной линией? чтобы не приходилось ее выставлять вручную или при помощи js

Answer 1

Добавьте в ваш код:

.inner {
    white-space: nowrap;
}

И уберите width: 800px;

Answer 2

.outer {
  width: 300px;
  background: red;
  overflow-x: scroll;
}

.inner {
  white-space: nowrap;
}

span {
  display: inline-block;
  background: yellow;
  width: 100px;
  height: 100px;
  margin: 10px;
}

<div class='outer'>
  <div class='inner'>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

БЛОГ НА HUSL

Как сделать блоки без переноса

Ответы (2 шт):