填充保持重叠的导航栏链接

Question

我正在尝试这样做，所以我可以创建更大的导航链接填充，但当我这样做时，填充只是重叠导航栏，例如当我更改填充：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; *display: inline; zoom:1; }