Question

我正在构建一个包含3行和3列图像的导航框。我的目标是在每张图片下面添加一些文字。今天我遇到了'figcaption'，虽然它看起来像完美的标签，但我无法接缝以使其显示正确。

问题图像正确显示'内联'，直到我添加'figcaption'标签。文本出现在块（我假设）中，在每个图像下面都很好..但它也会强制下一个图像到一个新行（即使内联块已应用于父容器''）。

我正在使用的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/

Figcaption可防止图像内嵌对齐

1 个答案: