Anzeige: Inline-Block funktioniert nicht für mich

Question

Ich beginne und übe das Erstellen einer Website, aber ich hatte Probleme damit, meine Bilder horizontal erscheinen zu lassen. Ich habe versucht, Display: Inline-Block, aber die Bilder bleiben vertikal. Tut mir leid, wenn das ein einfacher Fehler ist, aber es hat mich stundenlang gestört. Partielle 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

Pop der display: inline-block; auf der li in der CSS.

#gallery li { 
    display: inline-block; 
} 

Hier ist ein anschauliches Beispiel: http://codepen.io/alexmccabe/pen/VjzzjZ, mein zusätzlicher Code am unteren Rande des CSS ist.

Abgesehen davon würde ich keine IDs für Elemente verwenden, es sei denn, Sie haben einen sehr guten Grund, es könnte in Zukunft Spezifitätsprobleme verursachen.