图像不会水平显示

Question

我尝试使用内联和内联块，但它不起作用。

这是我的代码：

http://jsbin.com/bixako/edit

Answer 1

在我看来，其他答案有点hacky并没有解决这个问题的真正原因。发生这种情况的原因与使用您将<figure></figure>标记放在其中的html <img />标记特别相关。

  

<figure>标记用于指定自包含的内容，如插图，图表，照片，代码清单等。   虽然元素的内容与主流相关，但其位置与主流无关，如果删除，则不应影响文档流。   资料来源：http://www.w3schools.com/tags/tag_figure.asp

<figure>标记会自动取代元素的位置而不依赖于主要内容流，这就是为什么它似乎只是通过使用CSS float或position: absolute进入流程的原因因为float和绝对位置也会从元素的主要位置流中移位元素的位置。

删除<figure>代码，您将再次使用white-space: nowrap;，display: inline-block;和所有常规内容流对齐技巧。

Answer 2

将#imglist li设置为float：left并清除#imglist以防止任何重叠。

我在这里快速编辑了您的示例http://jsbin.com/jutalasuqi/edit?html,output

我缩小了图像，因为尺寸并不适合彼此。

Answer 3

添加以下代码，它将起作用：

#imglist li figure {
    margin:0;
    padding:0;
    display: inline;
}

但是你仍然需要修复图像大小，li margin / padding问题以使它们美观/整理。

由于