0

Есть код:

.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

1
  • вам надо чтобы блоки влезали все в outer? т.е. у span размер менялся или наоборот, требуется чтобы span одного размера фиксированного были?
    – Zhihar
    1 дек 2020 в 13:11

2 ответа 2

1

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

.inner {
    white-space: nowrap;
}

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

1

.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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.