css - 在菜单的 "float: left"标签中使用 "a"

Question

包括标有“这里!!!”的地方的“ float :左”使“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;
}

Answer 1

那是因为 <a>元素是内联元素。当你添加它时 float:left它开始表现得像 block 元素。

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

您可以找到很好的解释HERE .