67

ここに私のJsFiddleがあります

Chrome 開発者ツールでアンカー タグのサイズを調べると144px*18px、最初の要素と310px*18px2 番目の要素が表示されます。

含まれている要素の高さと幅をとらない理由と、それがどのように計算されているかを知りたいです。

.gallery {
    background-color: #abcdef;
}
.gallery img {
    display: inline-block;
    margin-left: 20px;
    margin-top: 20px;
}
.normal {
    height: 160px;
    width: 110px;
    border: 5px solid black;
}
.wide {
    height: 160px;
    width: 280px;
    border: 5px solid black;
}
<div class="gallery">
    <a href="#"> <img class="normal" src=""> </a>
    <a href="#"> <img class="wide" src=""> </a>
</div>

4

7 に答える 7

51

display:inline-blockアンカーで使用

.gallery a{
    display:inline-block;
}

ここに更新されたjsFiddleファイルがあります

また、画像からマージンを削除してアンカーに追加します

.gallery a{
    display: inline-block;
    margin-left: 20px;
    margin-top: 20px;
}
于 2013-09-03T06:00:24.277 に答える
10

anchorデフォルトでは常にdisplay: inlineです。anchor子空間を取得するには、display:blockまたはこの場合は、およびdisplay:inline-blockになるように、またはを指定する必要がinlineありblockます。

a{
    display:inline-block;
}

JSFiddle

詳細については、この質問をお読みください。

于 2013-09-03T06:00:34.543 に答える
4

タグも同様にスタイルを設定する必要があります

追加した

.gallery a {
display: inline-block;
}
于 2013-09-03T06:00:47.263 に答える