На веб-странице, как я могу создать горизонтальную прокрутку вместо перехода на следующую строку?

У меня есть куча столбцов информации, которые выглядят так:

<span style="width:280px;float:left">
     some stuff
<span>

<span style="width:280px;float:left">
     some stuff
<span>

<span style="width:280px;float:left">
     some stuff
<span>

<span style="width:280px;float:left">
     some stuff
<span>

etc . .

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


html css horizontal-scrolling
person leora    schedule 16.01.2014    source источник
comment
возможный дубликат Остановить перенос плавающих элементов div   -  person schellmax    schedule 16.01.2014

Ответы (1)


arrow_upward
2
arrow_downward

Просто поместите свои span элементы в контейнер:

<div>
    <span>...</span>
    <span>...</span>
    ...
</div>

Затем удалите свойство float из ваших span элементов и вместо этого установите для них display как inline-block и присвойте новому содержащему элементу white-space из nowrap, чтобы предотвратить их попадание на новую строку:

div {
    white-space: nowrap;
}

div span {
    display: inline-block;
    width: 280px;
}

Если вы действительно настаиваете на использовании свойства style для каждого отдельного элемента (что является плохой практикой) вместо включения CSS, как я использовал выше, это будет равно:

<div style="white-space: nowrap;">
    <span style="display: inline-block; width: 280px">...</span>
    <span style="display: inline-block; width: 280px">...</span>
    ...
</div>
person James Donnelly    schedule 16.01.2014
comment
Я чувствую, что вы должны объяснить, почему вы заменяете поплавки встроенными блоками. Одним из недостатков вашего метода является то, что у вас есть промежутки размером с пространство между пролетами. - person Mr Lister; 16.01.2014
comment
@MrLister, потому что inline-block элементы отображаются встроенными. Плавающие элементы отображаются как блоки и не являются встроенными. Свойство пробела никак не повлияет на нестрочные элементы. Чтобы избавиться от пустого пространства между промежутками, есть несколько вещей, которые можно сделать. - person James Donnelly; 16.01.2014