Question

我希望在同一行上有多个图像，每个图像下方都有一个标题。我可以使用display:inline标记将图像放在同一行。当我添加figure标签时，它们会移动到不同的行。我尝试了多种变体，无法使其发挥作用。

我是否使用错误的标签进行工作？我在其他网站上看过这个，但不知道他们是怎么做到的。

CSS

section.products{
    width: 100%;
    padding:5px;
    line-height:100%;
    margin-top: 5px;
    float: left;
    text-align: center;
}
img.fans {
    text-align: center;
    max-width: 100%;
    height: 50px;
    width: 50px;
}
a {
    color: #000000;
    text-decoration: none;
    font-weight: bold;
}
p {
    text-align:center;
    align: center;
}
figure {
    display:center;
}
ul.fans li{
    display: inline;
}

HTML

<section class="products">
    <h1>Fans</h1>
    <p>
        <ul class="fans">
            <li>
                <a href="#">
                    <figure>
                        <img class="fans" src="images/shrouded.JPG" alt="Shrouded" style="Float"</img>
                        <figcaption>Shrouded</figcaption>
                    </figure>
                </a>
            </li>
            <li>
                <a href="#">
                    <figure>
                        <img class="fans" src="images/shallow_recess.JPG" alt="Shrouded" style="Float"</img>
                        <figcaption>Shallow Recess</figcaption>
                    </figure>
                </a>
            </li>
        </ul>
    </p>
</section>

Answer 1

你有一些错误。

您未正确关闭图片代码
你的内联风格“浮动”无效

这应该可以帮助您获得所需的信息。

的CSS

"Hello World

HTML

ul.fans li {
  display: inline-block;
}
figcaption {
  text-align: center
}

Codepen Example

Answer 2

使用html 5放置图像标记的正确方法就是这样

<img class="fans" src="images/shallow_recess.JPG" alt="Shrouded"  />

你不需要标签，因为你从未打开标签，看起来你正在混合旧的做事方式

<img class="fans" src="images/shallow_recess.JPG" alt="Shrouded"></img>

显示内联将使li表现为p标签或任何其他内联元素。

添加figcaption时他们要去新行的原因是因为figcaptions显示：block。块显示类型将始终将项目推送到下一行。使用css，您可以更改项目的显示类型，就像使用li元素一样。图形标记也是一个块元素。

当你写html时，请总是在有嵌套（另一个内部元素）时缩进

style =“Float”也是无效的css。 “”之间的任何内容都将是css，它被称为内联css。最好没有css内联，因为它可能会在以后尝试更改大部分元素的css时引起问题。

您可以使用样式标记在文档顶部添加css。像这样

  <style type="text/css">
    ul.fans li {
        display: inline;
    }

   </style>

您需要更正结束标记并将css放在正确的位置，并确保不进行内联css（style =“float：left;”）。

由于之前的答案中说明你可能不需要列表，因为列表是用于打破新行，你可能想要做这样的事情

 <style type="text/css">
        .fans li{
            display: inline;
        }
        .fans .captioned-image {
            display:inline-block;
            width:200px;
        }

        .fans figure {
            width: 200px;
            display:block;
            text-align:center;
        }

        img {
            max-width:200px;
        }
    </style>
<section class="products">
        <h1>Fans</h1>
        <p>
           <div class="fans">
                <div class="captioned-image">
                    <a href="#">
                        <figure>
                            <img class="fans" src="images/shallow_recess.JPG" alt="Shrouded" style="" />
                            <figcaption>Shrouded</figcaption>
                        </figure>
                    </a>
                </div>
                <div class="captioned-image">
                    <a href="#">
                        <figure>
                            <img class="fans" src="images/shallow_recess.JPG" alt="Shrouded" style="" />
                            <figcaption>Shallow Recess</figcaption>
                        </figure>
                    </a>
                </div>
            </div>
        </p>
    </section>

带有标题

2 个答案: