顯示：內聯阻止功能不適用於我

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; 在CSS中的li上。

#gallery li {
    display: inline-block;
}

這是一個實時示例： http : //codepen.io/alexmccabe/pen/VjzzjZ ，我添加的代碼在CSS的底部。

順便說一句，除非您有充分的理由，否則我將避免在元素上使用ID，否則將來可能會引起特異性問題。