Дисплей: встроенный блок не работает для меня

Question

Я начинаю и занимаюсь созданием веб-сайта, но у меня были проблемы с отображением моих изображений по горизонтали. Я попытался использовать display: inline-block, но картинки остаются вертикальными. Извините, если это простая ошибка, но она меня била часами. Частичный HTML:

/*Main CSS*/ 
 

 
/*All Styling*/ 
 

 
* { 
 
    background-color: #f2f2f2; 
 
} 
 
/*All Text Styling*/ 
 

 
a { 
 
    text-decoration: none; 
 
    color: gray; 
 
    font-family: 'Open Sans Condensed', sans-serif; 
 
} 
 
/*Visited Page and Hover Link Color*/ 
 

 
a:visited, 
 
a:hover { 
 
    color: #838383; 
 
} 
 
/*Body Styling*/ 
 

 
body {} 
 
/*Section and Footer Wrapper*/ 
 

 
#sfwrapper { 
 
    max-width: 940px; 
 
    background: #f2f2f2; 
 
    text-align: center; 
 
    font-size: 1em; 
 
    color: gray; 
 
} 
 
/*Ordered Lists*/ 
 

 
ol { 
 
    list-style-type: none; 
 
} 
 
/*Head*/ 
 

 
h1 { 
 
    text-align: center; 
 
    font-weight: normal; 
 
    line-height: 0.5em; 
 
    color: #8c8c8c; 
 
} 
 
/*Subhead*/ 
 

 
h2 { 
 
    text-align: center; 
 
    font-weight: normal; 
 
    color: #8c8c8c; 
 
} 
 
/*NAV Styling*/ 
 

 
nav { 
 
    text-align: center; 
 
    padding: 10px 0; 
 
} 
 
/*Gallery Styling*/ 
 

 
#gallery { 
 
    display: inline-block; 
 
} 
 
/*Footer Styling*/ 
 

 
footer { 
 
    font-size: 0.75em; 
 
}

<ol id="gallery"> 
 
    <li> 
 
    <a href="img/placeholder.png"> 
 
     <img src="img/placeholder.png" alt=""> 
 
    </a> 
 
    <p>placeholder</p> 
 
    </li> 
 
    <li> 
 
    <a href="img/placeholder.png"> 
 
     <img src="img/placeholder.png" alt=""> 
 
    </a> 
 
    <p>placeholder</p> 
 
    </li> 
 
    <li> 
 
    <a href="img/placeholder.png"> 
 
     <img src="img/placeholder.png" alt=""> 
 
    </a> 
 
    <p>placeholder</p> 
 
    </li> 
 
    <li> 
 
    <a href="img/placeholder.png"> 
 
     <img src="img/placeholder.png" alt=""> 
 
    </a> 
 
    <p>placeholder</p> 
 
    </li> 
 
</ol>

Answer 1

Поп display: inline-block; на li в CSS.

#gallery li { 
    display: inline-block; 
} 

Вот живой пример: http://codepen.io/alexmccabe/pen/VjzzjZ, мой добавленным код находится в нижней части CSS.

Будучи в стороне, я бы воздержался от использования идентификаторов на элементах, если у вас нет веских оснований, это может создать проблемы специфики в будущем.