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;

＆＃13;

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 */
}

＆＃13;

<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>

＆＃13;

Answer 2

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

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

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

Answer 3

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

应该修复溢出。

为什么<a> tag content overflows containing div boundaries?</a>

3 个答案: