3

我有一个水平菜单的 CSS 代码：

.vertical-nav {
    height:auto;
    list-style:none;
    width: 100%; /******* MODIFIED ********/
    margin-top:0;
    margin-bottom:35px;
    margin-left:0;
}
.vertical-nav li {
    height: 25px;
    margin: 0;
    padding: 5px 0;
    background-color: #666;
    border: none;
    text-align: center;
    display: inline-block;
    float: left;
    width: 100px;  /******* MODIFIED ********/
}
.vertical-nav li:hover {
    background-color:#f36f25;
    color:#FFFFFF;
}
.vertical-nav li a {
    font-family:Calibri, Arial;
    font-size:18px;
    font-weight:bold;
    color:#ffffff;
    text-decoration:none;
}
.vertical-nav li.current {
    background-color:#F36F25;
}
.vertical-nav li.current a {
    color:#FFFFFF;
}
vertical-nav ul li ul {
    display:none;
    list-style-type:none;
    width:125px;
    padding:0px;
    margin-top:3px;
    margin-left:-5px;
}
vertical-nav ul li:hover ul {
    display:block;
}
vertical-nav ul li:hover ul li {
    background-color:#555555;
    width:125px;
    height:30px;
    display:inline-block;
}
vertical-nav ul li ul li:hover {
    background-color:#333333;
}
vertical-nav ul li ul li a {
    color:#FFF;
    text-decoration:underline;
}
vertical-nav ul li ul li a:hover {
    text-decoration:none;
}
.vertical-nav li ul {
    display: none;
    margin-top: 10px;
    padding: 0;
}
.vertical-nav li:hover ul {
    display: block;
}
.vertical-nav li:hover .sub-menu
{
    display: table;
}
.sub-menu li
{
    width: 100%;
    min-width: 180px;
    white-space: nowrap;  
    display:table-row;
    z-index:1;
    position:relative;
}
.sub-menu li a
{
    display:inline-block;
    padding: 0 10px;
}

但它在左边有一个边距，我不知道如何删除。

我试过做margin：0和margin：-10px等......但它不会去。

这是一个 jsFiddle：http: //jsfiddle.net/QSEGR/

4

2 回答 2

4

其实不是保证金。

Web 浏览器padding-left在 HTML 列表元素上应用一个，例如<ul> (Google Chrome set -webkit-padding-start: 40px;)。

您可以通过设置元素padding: 0;来覆盖用户代理样式表：<ul>

.vertical-nav {
    padding: 0;
}

这是JSFiddle 演示

注意： Web 浏览器还有一个margin: 8px;应用于<body>元素，您可以通过以下方式重置边距：

body {
    margin: 0;
}

最佳做法是什么？

不同的浏览器可能有不同的行为。默认情况下，他们在 HTML 元素上应用了几个 CSS 声明。他们添加margin, padding,text-decoration等等。

为了摆脱这种情况，大多数 Web 开发人员使用一些称为CSS Reset的 CSS 声明来覆盖浏览器的默认样式表，作为起点。

看看传奇的 Eric Meyer 的 CSS Reset。

于 2013-08-28T17:45:44.603 回答
3

添加填充：0；到无序列表。

于 2013-08-28T17:46:37.063 回答