Как реализовать выравнивание элементов по горизонтали?

Question

[daMage]

Подскажите, как реализовать выравнивание элементов по горизонтали. Есть родитель, определенной ширины, в котором элементы выходят за его пределы. Все элементы, что не влезли, не показываются.
Первое что пришло в голову задать контейнеру размер 9999px и поместить в обертку, со свойством overflow: hidden, но хочется решение поизящнее.

<div class="wrapper">
	<div class="cont">
		<div class="child"></div>
		<div class="child"></div>
		<div class="child"></div>
		<div class="child"></div>
		<div class="child"></div>
	</div>
</div>

Можно ли обойтись без wrapper? Нужно просто указать контейнеру, чтобы элементы внутри не переносились на новую строку, а шли дальше по горизонтали.

Comments

[daMage]

Я наверное не совсем точно поставил вопрос. Как отобразить элементы по горизонтали я знаю. Проблема в другом: допустим контейнер шириной в 400 пикселей и высотой 100, в нем есть n-ое количество дочерних элементов, шириной и высотой в 100 пикселей. Если n = 4, то всё нормально, но как только n>4, то 5-8 элементы перейдут на второй ряд, затем 9-12 на 3 и так далее. При этом появляется вертикальная прокрутка. Нужно чтобы все они шли по горизонтали и если n > 4, появлялся горизонтальный скролл.

Answer 1

[Константин Довнар]

Нечто такое должно подойти: *клац*

upd. Про уточнение: как уже написал в комментариях выше - чтобы появлялся скролл достаточно поменять значение overflow.

Answer 2

[Roman Zhak]

<div class="cont">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>

.cont {
  width: 500px;	
}
.cont:before, .cont:after {
  display: table;
  content: " ";
}
div[class="child"] {
  width: 20%;
  height: 50px;
  float: left;
}
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Answer 3

[ndsdmfwg]

Оформимся давай на koding.com, там есть одна feature, -teamwork называется. Вот тут в уточнениях я написал о чем это, и с чем едят вкратце тут, поподробнее тут, тут, тут или тут

Answer 4

[Илья Izumskee]

Если я правильно понял суть вопроса, то могу посоветовать вам попробовать поставить свойство white-space: nowrap у родителя.