TransWikia.com

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

Stack Overflow на русском Asked on December 5, 2020

Есть код:

.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

css

2 Answers

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

.inner {
    white-space: nowrap;
}

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

Correct answer by Neolot on December 5, 2020

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

Answered by Zhihar on December 5, 2020

Add your own answers!

Ask a Question

Get help from others!

Recent Questions

Recent Answers

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP