Question

我有一个垂直的CSS菜单，但左边和上面有一个间隙，我无法找到删除它的位置 - 我的菜单CSS在下面，我用我的完整代码创建了一个小提琴：

#vertical_menu {
    float:left;
}
#vertical_menu > ul > li {
    display:inline-block;
    width:140px;
}
#vertical_menu > li {
    display:inline-block;
    list-style:none;
    margin-left:-20px;
}
#vertical_menu li a {
    display:block; 
    padding-bottom:10px;
    margin-top:15px;
    border-bottom:4px solid #000000;
    color: #000000;
    text-decoration:none;
}
#vertical_menu li a:hover { 
    border-color:#666666; 
    color:#666666
}

任何想法？

http://jsfiddle.net/Dfw9f/1/

Answer 1

我认为将此添加到您的代码中可以解决您的问题：

ul
 {
  padding:0px;
  margin:0px;
 }

希望这会有所帮助。

<强>更新

我认为差距不是因为边距或填充问题，而是因为表中的空行。您可以通过为表格提供边框来查看此内容，例如<table border="1">（jsfiddle）。

我看到你包括表格的最后一行，在表格和菜单之间有一条线。您可以通过删除表格的最后一行（这会弄乱您的布局）并向表格添加border-bottom来完成此操作，例如<table border="0" style="border-bottom:1px solid gray;">

JSFIDDLE - 这是一个更新版本，包含行和正确布局的菜单。

希望这会有所帮助。

Answer 2

我认为你要找的是重置CSS，请检查CSS Tools: Reset CSS

重置样式表的目标是减少浏览器中的浏览器不一致性默认行高，标题的边距和字体大小等内容

快速解决方案只需将其添加到您的CSS

ul,tr,hr{margin:0;padding:0;}

垂直CSS菜单，顶部和左侧间隙较大

2 个答案: