我正在尝试做一个可以与大多数CMS无缝集成的页脚，因此它使用列表项和嵌套列表，菜单样式。我收到的设计有顶级列表和连续的灰色背景，而嵌套列表项只是坐在它们下面而没有背景。
经过大量摆弄浮动和清晰的设置后，我设法得到了这个（现场演示：http://jsfiddle.net/mQqWX/）。
这非常接近我的需要。问题是，要使连续的顶部（较暗）灰色背景，我必须使链接具有100％的宽度。这会导致锚点的宽度超出托管它们的li项目，当我在overflow: auto项目上li时，我只会得到滚动条而不是扩展到锚点的宽度。
这导致了最右边的问题，其中列表中的最后一项（事件）具有圆形背景超出了包含div和ul的边界到'关于我们的链接（不应该有背景）。再次尝试overflow: auto只给我滚动条。我在两个元素上也有clearfix（with：after）。
如何将链接的宽度设置为包含<li>的宽度，以便我在width: 100%获得右边的溢出？
如何使包装器<div>和<ul>展开以包含水平宽度，而不会获得那些讨厌的滚动条？
谢谢！
P.S。这是我previous question的延续，经过大量试验和错误后取得了一些进展。
答案 0 :(得分：2)
将box-sizing: border-box提供给a。这解决了它。但它在旧版IE中不起作用。要使其工作，您可以在span标记内添加a。 a标记的宽度设置为100％，span和display: block会有填充。
问题来自于填充被添加到width的事实。 width: 100%; + padding: 20px;使width实际上等于100% + 20px + 20px。这比你想要的更多。
box-sizing: border-box;告诉浏览器让width始终保持在100％ - 填充+边框+宽度= 100％ - 这就是我现在使用的 - 我通过通用将它添加到所有元素*选择器。
答案 1 :(得分：2)
记住：填充+宽度=真显示宽度
所以如果你设置宽度：100％和padding-left：10px 让我们说父母有500px的筹码 真正显示的宽度将是510px，这将启用滚动条，它的未命中但它的css