[РЕШЕНО] Помогите разобраться в inline-block

[Alex-2]

Всем привет.
Помогите, пожалуйста, разобраться в CSS в inline-block.
Я совсем чайник и не могу понять, как выстроить блоки в 1 ряд.

HTML:

<div id="orders">
<div>текст</div> <div>текст</div> <div>текст</div> <div>текст</div>
</div>

CSS:

#orders {
display: inline-block;
}

Отображается все вертикально:
текст
текст
текст
текст

Как сделать так, что все отображалось горизонтально?

Спасибо!

[Alex11223]

Вы сам <div id="orders"> сделали inline-block, а не div внутри него.

[Alex-2]

Сообщение от Alex11223

Вы сам <div id="orders"> сделали inline-block, а не div внутри него.

<div>
<div  id="orders">текст</div> <div  id="orders">текст</div> <div  id="orders">текст</div> <div  id="orders">текст</div>
</div>

Т.е. вот так нужно сделать?

[Alex11223]

id должен быть уникальным, нельзя давать один id разным элементам. (точнее можно, но лучше так не делать и по стандарту HTML так нельзя)

Есть куча вариантов, например class, или в селекторе #orders div

[pompiduskus]

<div id="orders">
    <div class="mClass">текст 0</div>
    <div class="mClass">текст 1</div>
    <div class="mClass">текст 2</div>
</div>

CSS:

.mClass{
    display: inline-block;
}

А если вдруг один или более блоков будут не на ровне с другими, нужно добавить параметр вот такой.

.mClass{
    display: inline-block; vertical-align: top;
}

[Alex-2]

Большое спасибо.
#orders div попробовал и все стало работать

Спасибо за подробный ответ.
Теперь многое прояснилось.