html – CSS菜单左边距为奇数

概述我有一个水平菜单的CSS代码： .vertical-nav { height:auto; list-style:none; width: 100%; /******* MODIFIED ********/ margin-top:0; margin-bottom:35px; margin-left:0;}.vertical-nav li { 我有一个水平菜单的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;}

但它在左边有一个边距,我无法弄清楚如何删除.

我试过做保证金：0和保证金：-10px等……但它不会去.

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

解决方法 实际上它不是保证金.

Web浏览器在HTML列表元素上应用左侧填充,例如< ul> (谷歌浏览器设置-webkit-padding-start：40px;).

您可以通过设置填充来覆盖用户代理样式表：0; on< ul>元件：

.vertical-nav {    padding: 0;}

这是JSFiddle Demo

注意：还有一个保证金：8px;应用于< body>通过Web浏览器,您可以通过以下方式重置边距：

body {    margin: 0;}

什么是最佳做法？

不同浏览器可能有不同的行为.默认情况下,它们在HTML元素上应用几个CSS声明.他们增加了边距,填充,文本装饰等.

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

看看传奇Eric Meyer’s CSS Reset.

总结

以上是内存溢出为你收集整理的html – CSS菜单左边距为奇数全部内容，希望文章能够帮你解决html – CSS菜单左边距为奇数所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。