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

应该修复溢出问题。

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

Why does <a> tag content overflows containing div boundaries?

html

css