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。

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

Answer 1

请参阅this fiddle，你有一些错误的显示属性（块内联而不是内联块），我也收紧了你的标记

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

Answer 2

有几种选择：

选项1

<img>需要设为display:block。这会强制您的文字换行，并且不再需要<br>

的演示： 的

http://jsfiddle.net/Gzd8m/1/

选项2

<span>需要引入标记并设置为display:block。这也会强制您的文字换行，并且不再需要<br>

的演示： 的

http://jsfiddle.net/Gzd8m/2/

Answer 3

你不应该使用</br>，你也应该纠正这个：

display:inline-block;

而不是

display:block inline;

跨列表到多行

3 个答案: