html - 填充保持重叠导航栏链接

Question

我正在尝试使它，以便我可以创建更大的导航链接填充，但是当我这样做时，填充只会与导航栏重叠，例如当我将 padding:0.03em 更改为 10px 时，它将与 topnav div 重叠？我该如何阻止这个，为什么浮动：左改变导航栏的背景颜色？这是我的代码

#topnav { background-color:#333333; clear:both; width:100%; }
#topnav ul { margin:0px; background-color:#333333; }
#topnav ul li { display:inline; }
#topnav ul li a {  padding:0.03em 20px; font-size:1.05em; font-family:verdana; }

Answer 1

您正在向内联元素添加填充，而内联元素不喜欢填充顶部和底部，因此您应该使链接块：

#topnav ul li a { display: block; }

或者，如果您不想让它们保持内联：

#topnav ul li a { display: inline-block; }