Question

在这里学习html / css。我正在尝试向我的.menu ul li ul li

添加边框底部

.menu ul li ul li{
padding:0;
float:none;
margin:0 0 0 0px;
width:100%;
border-bottom: 1px solid #911;
}

但由于此样式中的右侧填充，边框在右侧被切断：

.menu ul li ul{
position:absolute;
right: 0px;
border:1px solid #911;
/*box-shadow*/
-webkit-box-shadow:0 1px 5px #CCCCCC;
   -moz-box-shadow:0 1px 5px #CCCCCC;
        box-shadow:0 1px 5px #CCCCCC;
margin-top:0px;
display:none;
padding:0px 16px 0px 0px;
}

我很困惑为什么需要16px的正确填充...当我删除正确的填充时，我的下拉菜单不再正确显示（边框关闭，当你下拉菜单时它向右扩展并导致滚动条出现）。

此外，下拉菜单左下角的边框上缺少空间，为什么会发生这种情况？

http://jsfiddle.net/vJaaR/

非常感谢！我非常感谢任何见解。

Answer 1

如果您使用100％的宽度并且还应用边框，填充或边距，那么您的内容将大于100％。

例如，如果您的页面宽度为900像素宽。

900px的100％是900。如果向左右两侧应用16像素填充，则会增加32像素。如果应用1像素边框，则为另外2个像素。如果向左右添加10像素边距，则为另外20像素。

当你全部添加时，元素的宽度将为：

900 + 32 + 2 + 20 = 954

<强>更新
如果您有块级元素（display: block），则无需将宽度指定为100％。如果你告诉它有一个特定的填充，边距和边框，那么宽度将占用剩余的空间（width: auto）。

html / css：请帮我解释一下这个填充

1 个答案: