0

私は CSS と HTML を学ぼうとしていますが、ここで非常に基本的な質問があります。画像の下のスパンにテキストが表示されるようにCSSを作成するにはどうすればよいですか

<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

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 に答える