css - Figcaption 防止图像对齐内联

Question

我正在构建一个包含 3 行 3 列图像的导航框。我的目标是在每张图片下方添加一些文字。我今天遇到了“figcaption”，尽管它接缝就像完美的标签，但我无法接缝以使其正确显示。

问题 在我添加“figcaption”标签之前，图像会正确地“内联”显示。文本出现在每个图像下方的 block 中(我假设)，这很好......但它也会强制下一个图像到一个新行(即使内联 block 已应用于父容器'')。

我使用的 html 如下..

<section class="menu">
<h1>Menu</h1>
<br /><br />
    <div>
    <a href=""><img src="img/image.png"><figcaption>Caption</figcaption></a>
    <a href=""><img src="img/image.png"><figcaption>Caption</figcaption></a>
    <a href=""><img src="img/image.png"><figcaption>Caption</figcaption></a>        
    </div>

        ***Div repeated twice***

</section>

这是CSS

.menu div {
    padding: 0;}
.menu li a{display: inline;}
.menu a img{
    width:32.1%; height:auto; 
    }

这是一个Fiddle

谢谢

Answer 1

根据 MDN，<figcaption>需要在 <figure> 内标签:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption

这是更新后的 HTML 结构:

<section class="menu">
<h1>Menu</h1>
<br />
    <div>
        <figure>
            <a href="">
                <img src="http://placekitten.com/100/100">
            </a>
            <figcaption>Caption</figcaption>
        </figure>
        <figure>
            <a href="">
                <img src="http://placekitten.com/100/100">
            </a>
            <figcaption>Caption</figcaption>
        </figure>
        <figure>
            <a href="">
              <img src="http://placekitten.com/100/100">
            </a>  
            <figcaption>Caption</figcaption>      
         </figure>
    </div>
</section>

和关联的CSS:

.menu div {
    padding: 0;}
.menu figure {display: inline-block;
    width:100px;
}
.menu a img{
    height:auto; 
}

http://jsfiddle.net/DHM46/5/