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

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

我认为您正在寻找的是重置CSS，请检查CSS工具：重置CSS

重置样式表的目标是减少浏览器的不一致 例如默认行高、边距和标题字体大小

为了快速解决问题，只需将其添加到您的 CSS 中

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

Answer 2

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

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

希望这有帮助。

更新

我认为差距不是因为边距或填充问题，而是因为表中的空行。您可以通过给表格添加边框来看到这一点，例如

<table border="1">

(jsfiddle)。

我看到您添加了表格的最后一行，以便在表格和菜单之间有一条线。您只需删除表格的最后一行（这会弄乱您的布局）并在表格中添加

border-bottom

即可完成此操作，例如

<table border="0" style="border-bottom:1px solid gray;">

JSFIDDLE - 这是更新版本，带有线条和正确布局的菜单。

希望这有帮助。

Answer 3

尝试将代码放入菜单框架中：

margin-top: -1rem;