こんにちは、html と css の初心者です。セクションを使用していくつかの画像を表示したかったのですが、奇妙な問題が発生しました。html のセクションに div を使用すると、必要な結果が得られますが、 < section > のみを使用すると、同じ結果が得られません。div ではなく、html の section のみを使用するのを手伝ってくれる人がいますか? これは私のCSSコードです:
#content2{
margin: 30px 0;
background: white;
padding: 20px;
clear: both;
box-shadow: 0px 1px 1px #999;
text-align: center;
overflow:hidden;
}
.section {
display: inline-block;
margin: 0 10px;
}
.section a {
color: orange;
font-weight:bold;
font-size: 1.5em;
line-height: 1em;
text-align: center;
display: block;
}
.section p {
color: black;
font-weight:bold;
font-size: 1.5em;
line-height: 1em;
text-align: center;
display: block;
padding-bottom: 2em;
}
私のhtmlは次のようになります：
<div id="content2">
<h4>Onze producten</h4>
<div class="section">
<a href="../html/kleding.html#Pika"> Pika deken</a>
<a href="../html/kleding.html#Pika"><img src="../images/NB1.jpg" /></a>
<p>€19.99</p>
</div>
<div class="section">
<a href="../html/kleding.html#City">City boy</a>
<a href="../html/kleding.html#City"><img src="../images/peuter1.jpg" /></a>
<p>249.99</p>
</div>
<div class="section">
<a href="../html/kleding.html#Classy">Classy girl</a>
<a href="../html/kleding.html#Classy"><img src="../images/peuter9.jpg" /></a>
<p>€244.99</p>
</div>
<div class="section">
<a href="../html/kleding.html#Outdoors">Outdoors</a>
<a href="../html/kleding.html#Outdoors"><img src="../images/girl1.jpg" /></a>
<p>€129.99</p>
</div>
</div>
前もって感謝します！