Как сделать DIV inline (в строчку)?

Question

[DrunkMaster]

<style>
  .container { width: 1000px; margin: 0 auto; }
  .container .line       { width: 250px; background: white; font-size: 24px; display: inline;}
  .clear { clear: both; }
</style>

<div class="container">
	<div class="line">тест 1</div>
	<div class="line">тест 1</div>
	<div class="line">тест 1</div>
	<div class="line">тест 1</div>
	<div class="line">тест 1</div>
	<div class="line">тест 1</div>
</div>

Суть вопроса: ширина контейнера 1000, ширина DIV 250 ожидал что будет 4 элемента в ряд, потом переход на след. строчку, ещё 4 в ряд и на 3 строчку. Но сейчас в ряд убирается намного больше 4 элементов. В чём я ошибся?

Comments

[Сергей Сергей]

.line{ display: inline-block; }
простой инлайн ширины не имеет.

[DrunkMaster]

Сергей Сергей: Да благодарю, попробовал, всё работает отлично

Answer 1

[Ленар Фаттахов]

У inline элементов нельзя задавать ширину, используйте inline-block или float

Comments

[DrunkMaster]

display: inline-block; ?

[Ленар Фаттахов]

DrunkMaster: Да. И предвидя следующую проблему, которая у вас возникнет - habrahabr.ru/post/189118, читайте "Как победить отступы между элементами с inline-block?"

[DrunkMaster]

Ленар Фаттахов: да там не получилось по 3 в строчку, ноя просто увеличил ширину главного контейнера )))

[Aleksandr]

DrunkMaster: Не совсем верное решение

Answer 2

[mr_dev1l]

Проще было бы .line задать width:25%; и float:left;

Answer 3

[Дмитрий]

Правильно советует Ленар
Интересный эффект, между блоками есть непонятный мне отступ



поставил border-sizing:border-box; что бы не учитывались border' ы
блоки четко по 250px, но из за отступов между блоками 4ре блока не влазят в контейнер шириной 1000px. Как интересно убрать этот отступ, margin: 0 не работает. И что это, баг или фича?

Comments

[Ленар Фаттахов]

В комментариях к моему ответу есть ссылка)

[Дмитрий]

Ленар Фаттахов: спасибо, то что надо)