1

我有一个垂直的 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/

4

2 回答 2

0

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

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

要快速解决，只需将其添加到您的 CSS

ul,tr,hr{margin:0;padding:0;}
于 2013-06-27T16:35:56.150 回答
0

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

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

希望这有帮助。

更新

我认为这个差距不是因为边距或填充的问题，而是因为你的表格中有一个空行。你可以通过给表格一个边框来看到这一点，比如<table border="1">（jsfiddle）。

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

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

希望这有帮助。

于 2013-06-27T16:34:00.093 回答