1

包括标有“这里！！！”的地方的“浮动：左” 使“a”元素的填充独立于祖先“ul”元素的填充。“a”元素之间的空间也消失了，如图A（包括“float：left”之前）和图片B（之后）所示。

在此处输入图像描述

在此处输入图像描述

有人可以解释为什么这会发生在我身上吗？

#top-menu {
    width: 470px;
    height: 200px;
    position: absolute;
    right: 0;
    border: solid;
}

#top-menu ul {
    width: 400px;
    float: left;
    padding: 20px;
    position: absolute;
    right: 0;
    bottom: 0;
    border: solid;
}

#top-menu li {
    display: inline;
    position: relative;
}

#top-menu li a {
    border: 1px solid transparent;
    border-radius: 4px 4px 4px 4px;
    color: #5A6770;
    float: left; /* <----- HERE!!! -----*/
    padding: 15px 20px;
    position: relative;
    text-decoration: none;
}

#top-menu li a:hover {
    background-color: #ECEFF2;
    border-color: #D1D6D9;
}

#top-menu li a:active {
    background-color: #E4E7EB;
    border-color: #BAC1C6;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18) inset;
}
4

1 回答 1

2

那是因为<a>元素是内联元素。当你添加它时，float:left它开始像块元素一样。

您只能在仅影响“行”的内联元素上设置边距和填充......即左右。但是你不能上下颠倒，因为例如。假设你有很长的段落，大约 10 行。在某个地方你有 span 或 a - 内联元素。没有给它们顶部和底部边距和填充的逻辑，导致所有段落都会刹车，但您可以添加左右。

你可以在这里找到很好的解释。

于 2013-01-27T09:35:26.170 回答