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;
}