Question

在我的主要元素中，我有10个图像用锚标签包装，所有这些图像都包含在主要的图形元素中。我已经添加了我的边框：

main img {

    width:100px;
    height:100px;
    float:left;
    display: block;
    padding:20px 75px 55px;
}

main img:hover {

    border-bottom:1px solid #666;
    margin-bottom:-1px; 
}

这实际上适用于所有图像，但是，第一行中的第四个子（或img），堆栈中的右上角图像准确无误，当moused显示其底部边框时，还会推动整行图像低于它1px。为什么那个img是一个无政府主义者，对此有点新鲜。

Answer 1

你可能正在努力实现这样的目标：

main img {

    width:100px;
    height:100px;
    float:left;
    display: block;
    padding:20px 75px 55px;
    border-bottom:1px solid transparent;

}

main img:hover {

    border-bottom:1px solid #666;

}

注意我在图像元素的默认状态下添加了透明的border-bottom。这占据了1px边框的空间而没有被看到。然后，当用户将鼠标悬停在任何给定图像上时，颜色从透明变为＃666，没有明显的跳跃。使用您最初发布的代码，在悬停时创建1px边框底部，在此过程中移动其他元素。

浮动元素和底部边框的问题

1 个答案: