горизонтальное меню с текстом и изображениями

Question

это мой css и html для меню. Я пытаюсь понять, как сделать все горизонтальным. Любая помощь будет принята с благодарностью. Приветствия.

ol { 
margin-top: 20px; 

} 

#images { 
margin-left: 10px; 
} 

#images-text { 
background: #f5f8ef; 
border-radius: 10px; 
width: 300px; 
height: 40px; 
font-family: Impact, Charcoal, sans-serif; 
display: inline; 

} 

Это HTML

<ol> 
    <li class="newbar"> 
    <div id = "images"> 
    <img src="images/crowd.png" width ="200" height="180"> 
    <img src="images/crowd.png" width ="200" height="180"> 
    <p> 

    <div id = "images-text"> 
    Arctic Monkeys 
    </div> 
    <div id = "images-text"> 
    Arctic Monkeys 
    </div> 
    </div> 
    </li> 
    </ol> 
    </div> 

Answer 1

Вам не нужно использовать <ol>. Если у вас есть <img> с текстом ниже или выше, рекомендуется использовать <figure> и <figcaption> для imagetext.

<figure> 
    <figcaption> 
     Image text 
    </figcaption> 
    <img src="images/crowd.png"> 
</figure> 

Если вы хотите, чтобы текстовое изображение ниже <img> просто поставить <figcaption> ниже <img>.

Чем, на фигуры в <div>:

<div> 
    <figure> 
     ... 
    </figure> 
    <figure> 
     ... 
    </figure> 
    <figure> 
     ... 
    </figure> 
    ... 
</div> 

CSS для каждого <figure>:

div figure { 
    display: inline-block; 
} 

CSS селекторы использование: http://www.w3schools.com/css/css_selectors.asp

пример: http://jsfiddle.net/qpk9smm8/