Question

我有一个jsfiddle显示我的问题：my issues。我的选项（菜单链接）比包含菜单的导航导航div进一步扩展。我知道这与每个元素的填充有关，但我不知道为什么。

任何帮助将不胜感激。

CSS代码：

@charset "utf-8";
/* CSS Document */
body {
    font-size:100%;
    font-family:Arial, Helvetica, sans-serif;
}
.navigation, .navigation a {
    width:245px;
    background-color:#363636;
    color:#ffffff;
}
.navigation h3 {
    padding:8px 2px 0 2px;
    margin:0;
}
.navigation ul {
    list-style:none;
    margin:0;
    padding:0;
}
.navigation li {
    margin:0;
    display:list-item;
}
.deeper.parent {
    background-color:#292929;
    padding:10px 2px;
}
span.nav-header {
    text-align:left;
    font-weight:bold;
}
ul.nav-child li a {
    text-align:right;
    display:block;
    padding:10px 2px;
}
ul.nav-child a:hover, ul.nav-child a:focus {
    background-color:#4a4a4a;
}

Answer 1

你是对的！这是导致您的问题的填充。因此，请将其添加到ul.nav-child li a样式：

width: calc(245px - *The Padding*);

*The Padding*是你在该元素上的填充。在您的情况下，4px，因此您的代码将成为：

ul.nav-child li a {
    width: calc(245px - 4px);
    text-align:right;
    display:inline-block;
    padding:10px 2px;
}

Updated Fiddle

Answer 2

如果您只需要在现代浏览器上使用它，请使用box-sizing：border-box（http://css-tricks.com/box-sizing/）

ul.nav-child li a {
    box-sizing: border-box;
    text-align:right;
    display:block;
    padding:10px 2px;
}

子菜单项比父div元素扩展得更远

2 个答案: