텍스트 및 이미지가있는 가로 메뉴

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>을 사용하는 당신은 필요가 없습니다

<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

입니다. 아래에 텍스트가있는 <img>이 있으면 imagetext에 <figure> 및 <figcaption>을 사용하는 것이 좋습니다.

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

당신은 <img> 아래 이미지의 텍스트가 바로 <img> 아래 <figcaption>을 넣어합니다.

보다는 <div>에서 수치 : 모든 <figure>에 대한

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

CSS :

div figure { 
    display: inline-block; 
} 

CSS 선택기 사용 : http://www.w3schools.com/css/css_selectors.asp

예 : http://jsfiddle.net/qpk9smm8/