Можно ли предотвратить перенос дочерних элементов в HTML?

Question

.container
{
 position: absolute;
 bottom: 0px;
 height: 25px;
 left: 200px;
 padding-right: 5px;
 background-color: black;
 overflow: hidden;
}


.child
{
 position: relative;
 float: left;
 height: 100%;
 width: 95px;
 background-color: #99CCFF;
 margin-left: 5px;
}

I, когда размер окна браузера меньше, чем позволяет подгонять все дочерние элементы без переноса, я хотел бы использовать полосу прокрутки, а не механизм по умолчанию для переноса дочерних элементов.

Я не контролирую количество дочерних элементов, поэтому не могу установить ширину контейнера. Как я могу предотвратить перенос дочерних элементов?

Answer 1

Если вы не хотите обтекание, вы не должны использовать float - они были созданы специально для обтекания.

Используйте родительский контейнер с overflow:auto и white-space:nowrap и дочерние с display:inline или inline-block.

Answer 2

Вы можете добавить родительский держатель () для всех детей.А затем используйте переполнение: auto этого div.Если это не сработает, тогда также используйте self.innerHeight и self.innerWidth (через javascript) для высоты и ширины div.

Answer 3

Это не возможно с простым HTML и CSS. Не зная количества дочерних элементов, единственным способом было бы динамически установить минимальную ширину с помощью JavaScript на основе количества дочерних элементов и их общей ширины.