1

我正在构建一个包含 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; 
    }

这是一个小提琴

谢谢

4

1 回答 1

0

According to MDN, <figcaption> needs to be inside a <figure> tag:

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

Here's an updated HTML structure: 

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

and associated css: 

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

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

于 2013-11-06T12:54:10.897 回答