Html CSS菜单有奇数的左边距
我有一个水平菜单的CSS代码:Html CSS菜单有奇数的左边距,html,css,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 { height: 25px; margin: 0; padding: 5px 0;
.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:实际上它不是边距 Web浏览器在HTML列表元素(如
)上应用左填充(Google Chrome set-webkit padding start:40px;
)
您可以通过设置padding:0来覆盖用户代理样式表代码>在
元件上:
。垂直导航{
填充:0;
}
这是
注意:还有一个边距:8px代码>通过web浏览器应用于
元素,您可以通过以下方式重置边距:
正文{
保证金:0;
}
最佳做法是什么?
不同的浏览器可能有不同的行为。默认情况下,它们对HTML元素应用多个CSS声明。它们添加了边距
,填充
,文本装饰
等等
为了解决这个问题,大多数web开发人员使用一些称为CSS重置的CSS声明来覆盖浏览器的默认样式表,作为起点
看看传奇。添加填充:0;到无序列表。在保留少量空白之后,他应该使用文档范围的重置,以确保他对布局有100%的控制权。但这是一个很好的答案@安东德一世解释了为什么利润率也存在;)