Почему div отображаются вертикально, а не горизонтально?

Это мой html. Раздел стиля немного отличается, потому что я пишу в React, но в остальном я предполагаю, что моя проблема возникает из-за css и html. Почему внутренние блоки div появляются в нижнем ряду. Я хочу, чтобы он отображался горизонтально внутри внешнего div с прокруткой по оси x. Я уже указывал свойства вроде white-space: nowrap.

 <div style = {{position:'absolute', width:'1200px', height:'80px',background:'#cc5',top:'270px',left:'100px',whiteSpace: 'nowrap',display:'inline-block',overflowX:'auto'}}>
            <div style = {{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
            <div style = {{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
            <div style = {{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
            <div style = {{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
            <div style = {{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
            <div style = {{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
            <div style = {{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
            <div style = {{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
            <div style = {{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
            <div style = {{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
            <div style = {{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>

            <div style = {{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
            <div style = {{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>


            <div style = {{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
        </div>

Можете ли вы подтвердить, что используемый стиль представляет собой код React и переводится в фактический HTML в браузере?

— 31.05.2018 08:39

да это точно

— 31.05.2018 08:44

html css reactjs

31.05.2018 08:27

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 2

Поскольку вы используете стиль:

display:'inline-block'

Также у вашего блока кода есть проблема, я исправил для двух div ниже:

<div style = "position:absolute; width:1200px; height:80px;background:#cc5;top:270px;left:100px;whiteSpace: nowrap;display:block;'overflow-x':auto">
<div style = "position:absolute; width:1200px; height:80px;background:#cc5;top:270px;left:100px;whiteSpace: nowrap;display:block;'overflow-x':auto">

Тогда что использовать, чтобы не дошло до новой строки

— 31.05.2018 08:29

что использовать тогда ... Я изменил его на встроенный, но даже это не помогает

— 31.05.2018 08:35

вы можете использовать display: block

— 31.05.2018 08:36

31.05.2018 08:28

Ваш код требует некоторых изменений, как показано ниже:

<div style = "position: absolute; width: 1200px; height: 80px;background: #cc5;top: 270px;left: 100px;white-space: nowrap;display: inline-block;overflow-x: auto;">
  <div style = "width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style = "width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style = "width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style = "width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style = "width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style = "width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style = "width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style = "width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style = "width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style = "width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style = "width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style = "width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style = "width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style = "width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style = "width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style = "width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style = "width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style = "width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style = "width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style = "width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style = "width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style = "width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style = "width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style = "width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style = "width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style = "width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style = "width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style = "width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style = "width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style = "width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style = "width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style = "width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
</div>

Поскольку у вас есть встроенный стиль, вы можете переместить их в файлы css. Также overflowX нужно поменять на overflow-x.

В ответ мы пишем так camelCase ... в остальном все то же самое

— 31.05.2018 08:40

@ J.Doe Тогда вы должны добавить правильный тег к вопросу. Просто [css] недостаточно: то, что у вас есть, не является настоящим css!

— 31.05.2018 08:45

ваш код также генерирует тот же результат ... Я имею в виду, что в одной строке у вас есть 9 белых div ... затем 9 в следующей строке и так далее ... я хочу только одну строку, и все элементы продолжаются в одной строке ... и Я получаю их, когда прокручиваю вправо @MrLister

— 31.05.2018 08:54

31.05.2018 08:37