html - CSS 画像とキャプションの折り返しなし

Question

私の目標はこれを生成することです:

<div>
   Image (40px by 40px) Caption

   Image (40px by 40px) Caption

   Image (40px by 40px) Caption
</div>

私の現在のコードは、画像のすぐ下ではなく、前のリスト項目で div 内にラップされる画像を生成します

私のコード構造は

<div>
   <ul>
      <li>
         <img/>
         <span>caption</span>
      </li>

      .....
   </ul>
</div>

表示されているラップを回避するには、どの CSS が必要ですか?

これらの要素に対して私が今持っているcssは

li img{
    position:absolute;
    bottom:0;
    display: block;
}
li{
    position:relative;
}

.box (this is for div)
{
    padding: 4px 15px;
    border: 1px solid #ccc;
    margin: 0 0 10px 0;
    border-radius: 15px;
    -moz-border-radius: 15px;

}

Answer 1

質問が適切に取得されていませんが、キャプションテキストがラッパーにならないようにする場合は、CSSwhite-spaceプロパティを使用して、テキストがラップされないようにします。

.box /* (this is for div) */ {
    padding: 4px 15px;
    border: 1px solid #ccc;
    margin: 0 0 10px 0;
    border-radius: 15px;
    -moz-border-radius: 15px;
    white-space: nowrap;
}