html - 跨越列表到多行

Question

我有以下代码，但我无法像在表格中那样让文本中断并显示在图像下方。

<ul style="display:block inline; list-style:none;">
<li style="display:inline"><img src="BoxCover-01.jpg" /><br />Title 01</li>
<li style="display:inline"><img src="BoxCover-02.jpg" /><br />Title 02</li>
<li style="display:inline"><img src="BoxCover-03.jpg" /><br />Title 03</li>
<li style="display:inline"><img src="BoxCover-04.jpg" /><br />Title 04</li>
<li style="display:inline"><img src="BoxCover-05.jpg" /><br />Title 05</li>
</ul>

理想情况下，我想隐藏元素符号并内联显示。列表项也需要根据内容宽度优雅地相互层叠。

这将被放入博客文章中以显示提名电影/dvd 的 block 。

非常感谢任何帮助，谢谢。

Answer 1

参见 this fiddle ，你有一些错误的显示属性(内联 block 而不是内联 block )，我也收紧了你的标记

HTML

<ul >
<li ><img src="BoxCover-01.jpg" />Title 01</li>
<li ><img src="BoxCover-02.jpg" />Title 02</li>
<li ><img src="BoxCover-03.jpg" />Title 03</li>
<li ><img src="BoxCover-04.jpg" />Title 04</li>
<li ><img src="BoxCover-05.jpg" />Title 05</li>
</ul>

CSS

ul{
    list-style:none;
    padding:0;
    margin:0;
}
li{
    display:inline-block;
}
img{
    display:block;
}