html - 为什么 <a> 标签内容会溢出包含 div 边界？

Question

我想在 div 中实现一个带有无序列表的水平菜单。问题是标签溢出(更大)然后包含 div。或者，从另一方面看，div 确实考虑了标签的完整大小。

CSS

div.menu {
    background: grey;
}
div.menu > ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
div.menu > ul > li {
    display: inline;
}
div.menu > ul > li > a:link, div.menu > ul > li > a:visited {
    color: #FFFFFF;
    background-color: orange;
    padding: 4px;
    text-align: center;
    text-decoration: none;
}

HTML

<div class="menu">
    <ul>
        <li> <a href="www.google.com">Google</a>
        </li>
        <li> <a href="www.google.com">Google</a>
        </li>
        <li> <a href="www.google.com">Google</a>
        </li>
        <li>No overspill
        </li>
    </ul>
</div>

JSFiddle

问题与填充有关，因为如果我将填充设置为 0，则不会溢出。 为什么会发生这种情况？解决此问题的最佳做法是什么？

Answer 1

将下面的代码行添加到您的 CSS 代码块中。

display: inline-block;

div.menu {
    background: grey;
}
div.menu > ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
div.menu > ul > li {
    display: inline;
}
div.menu > ul > li > a:link, div.menu > ul > li > a:visited {
    color: #FFFFFF;
    background-color: orange;
    padding: 4px;
    text-align: center;
    text-decoration: none;
    display: inline-block; /* This line solves the overlapping problem */
}

<div class="menu">
    <ul>
        <li> <a href="www.google.com">Google</a>
        </li>
        <li> <a href="www.google.com">Google</a>
        </li>
        <li> <a href="www.google.com">Google</a>
        </li>
        <li>No overspill
        </li>
    </ul>
</div>