ワードプレス、コンテンツ内に、テキスト付きで画像を横並びに表示する方法

ワードプレスのコンテンツ内に上記のような、画像を横並びにして、下にテキストでリンク先の内容を記載できるような表示をさせたかったので、コードを作成してみました。

1 スタイルシート
2 コンテンツに記載するコード

スタイルシート

#yokoimg {
width: 550px; /*親ボックスの幅*/
font-size: 8px;
overflow: hidden;
}

#yokoimg ul {
width: 560px;
margin-right: -10px;
font-size: 8px;
}

#yokoimg ul li {
width: 95px;/*子ボックスの幅*/
float: left;
margin-right: 10px;
list-style-type: none;
font-size: 10px;
line-height: 13px;


}

ワードプレスのダッシュボード画面の外観→テーマの編集からスタイルシードに上記のコードを追加します。

コンテンツに記載するコード

<div id="yokoimg">
<ul>
<li> <a href="リンク先URLを入れる">
      <img src="画像URLを入れる" alt=""/>
記載したいテキスト文を入れます
    　　</a>
</li>
<li> <a href="リンク先URLを入れる">
      <img src="画像URLを入れる" alt=""/>
記載したいテキスト文を入れます
    　　</a>
</li>
<li> <a href="リンク先URLを入れる">
      <img src="画像URLを入れる" alt=""/>
記載したいテキスト文を入れます
    　　</a>
</li>
<li> <a href="リンク先URLを入れる">
      <img src="画像URLを入れる" alt=""/>
記載したいテキスト文を入れます
    　　</a>
</li>
<li> <a href="リンク先URLを入れる">
      <img src="画像URLを入れる" alt=""/>
記載したいテキスト文を入れます
    　　</a>
</li>

</ul>
</div>

記事のコンテンツ内に記載するコードは上記になります。