html - 如何在右侧列出图标并在每个图标下方相应地显示文字？

Question

我想从左到右显示图标的图片，并在每个图标下方显示它们各自的名称并间隔开。 icon1 下方的文本“Icon1”，依此类推。 tierGo 中没有 CSS。

<div id="tierGo">
    <h1>Icon List</h1>
    <img src="tinyIcons/icon1.png" style="margin-right:15px;" />
    <img src="tinyIcons/icon2.png" style="margin-right:15px;" />
    <img src="tinyIcons/icon3.png" style="margin-right:15px;" />
    <img src="tinyIcons/icon4.png" style="margin-right:15px;" />
    <img src="tinyIcons/icon5.png" style="margin-right:15px;" />
</div>

Answer 1

我成功地使用了 div 和列表。我还在列表中添加了一些 CSS。 Fiddle

<div id="tierGo">
    <h1>Icon List</h1>
    <ul>
   <li> <div image1>
            <img src="http://placehold.it/50x50"/>
        <div >
            Image 1
        </div>
    </div>
   </li>  
   <li> <div image2>
            <img src="http://placehold.it/50x50"/>
        <div >
            Image 2
        </div>
    </div>
   </li>  

   <li> <div image3>
            <img src="http://placehold.it/50x50"/>
        <div >
            Image 3
        </div>
    </div>
   </li>  
    </ul>

CSS:

li{
    list-style-type: none;
    display: inline;
    margin-right: 15px;
    float: left;
}