为什么<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;
}

目录

<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 代码的 LI 块中。

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>

Answer 2

内联元素上的填充不会影响元素的大小。填充将仅在元素周围可见。

可以在列表项上使用display: inline-block;，然后在链接上使用display: block;，这将包括元素大小中的填充。

另一种方法是对列表项使用float: left;，对链接使用display: block;。这取决于您想要的布局方式，因为这会将链接彼此相邻，而不是用空格分隔。

Answer 3

div.menu > ul > li > a{
  display:inline-block;
}

应该修复溢出。