CSS菜单具有奇数左边距 [英] CSS Menu has odd left margin

问题描述

我有一个水平菜单的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，Ari​​al; 
 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; 
} 
  

但它在左侧有一个边缘，我无法解决如何删除。

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

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

$ b

网络浏览器应用< ul> （Google Chrome设置 -webkit-

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

  .vertical-nav {
 padding：0; 
} 
  

这里是 JSFiddle演示

还有由网络浏览器应用于< body> 元素的 margin：8px; ，您可以重置：

  body {
 margin：0; 
} 
  

---

最佳做法？

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

为了摆脱这一点，大多数web开发人员使用一些CSS声明称为 CSS重置来覆盖浏览器的默认样式表，作为开始

查看传奇 Eric Meyer的CSS重置。

I have this CSS code for a horizontal menu:

.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;
}

but it has a margin on the left that i cannot work out how to remove.

i have tried doing margin:0 and also margin:-10px etc... but it wont go.

here is a jsFiddle: http://jsfiddle.net/QSEGR/

解决方案

Actually it isn't margin.

Web browsers apply a padding-left on HTML list elements such as <ul> (Google Chrome set -webkit-padding-start: 40px;).

You could override the user agent stylesheet by setting padding: 0; on <ul> element:

.vertical-nav {
    padding: 0;
}

Here is the JSFiddle Demo

Note: There's also a margin: 8px; applied on <body> element by web browsers, you could reset the margin by:

body {
    margin: 0;
}

---

What is the best practice?

Different browsers may have different behavior. they apply several CSS declaration on HTML elements by default. they adds margin, padding, text-decoration and so on.

To get rid of this, most web developers use some CSS declarations called CSS Reset to override the browser's default stylesheet, as a start point.

Take a look at Legendary Eric Meyer's CSS Reset.

这篇关于CSS菜单具有奇数左边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！