0

我正在尝试学习 CSS 和 HTML，并且在这里有一个非常基本的问题。我如何编写我的 css 以便它在图像下方的 span 中显示文本

<div class="section">
    <ul>
        <li id="lumia820" class="figures" >
            <img src="f-lumia820.jpg" alt="" class="figure"/>
            <span class="figcaption">Lumia 820</span>
        </li>
        <li id="iphone4s" class="figures">
            <img src="f-iphone4s.jpg" alt="" class="figure"/>
            <span class="figcaption">Iphone 4s</span>
        </li>
    </ul>
</div>

目前，我有类似的东西

.section ul {
    margin: 0 auto;
    float: left;
}

.figures {
    display: inline;
}

.figures span {
    font-size: 20px;
    font-family: "Book Antiqua", "Palatino Linotype", Georgia, serif;
    letter-spacing: 0.1em;
}

.figures img{
    vertical-align: top;
    width: 30%;
    height: 30%;
    margin: 1% 1%;
}
4

4 回答 4

3

只需将 设置为，display: block;以便每个人占用自己的线路。现在，它们被设置为，display: inline因为这是<img>标签和<span>标签的默认值。

.figures span, .figures img {
    display: block;
}
于 2013-10-10T15:48:07.470 回答
1

应该可以

.figcaption {
   display:block;
}

小提琴

于 2013-10-10T15:48:09.650 回答
1

这应该可以解决问题：

.figures span{ display: block; }
于 2013-10-10T15:48:35.943 回答
0

检查这个演示：http: //jsfiddle.net/h6McP/1/

跨度和图像实际上是一个内联元素，所以它会一行一行地出现，我们需要制作块元素，这样跨度就会出现在图像的下方

我在这里给了

.figures span {display:block}

li.figures { display: inline-block;}

检查这是更新的一个

于 2013-10-10T16:00:43.200 回答