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;
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/
问题答案：
其实不是保证金。
网络浏览器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。
-
问题内容： 在我的HTML文档中，我有一个包含两列和多行的表。如何使用CSS增加第一列和第二列之间的空间？我尝试应用“ margin-right：10px;” 到左侧的每个单元格，但没有效果。 问题答案： 将此应用到您的第一个： HTML示例：
-
我使用flexbox在桌面窗口屏幕中布局我的index.html，在一行中有两个div元素，在第二行中有一个长div元素，在第三行中有两个div元素，其中一个包含一个列表。我需要第一行和第三行中两个div元素之间的一些行间距。当我尝试在div元素上使用左边缘或右边缘时，div元素会相互折叠。 我试图改变每个div元素的宽度，但它们最终会互相折叠。我还尝试了在内容类上证明内容和对齐内容，但没有任何结
-
主要内容：定义各个方向上的内边距,内边距简写形式内边距（padding）是指元素内容区与边框之间的区域，与外边距不同，内边距会受到背景属性的影响。您可以通过下面的属性来设置元素内边距的尺寸： padding-top：设置元素内容区上方的内边距； padding-right：设置元素内容区右侧的内边距； padding-bottom：设置元素内容区下方的内边距； padding-left：设置元素内容区左侧的内边距； padding：内边距属性的
-
主要内容：为元素设置外边距,外边距折叠元素的外边距（margin）是围绕在元素边框以外（不包括边框）的空白区域，这片区域不受 background 属性的影响，始终是透明的。 为元素设置外边距 默认情况下如果不设置外边距属性，HTML 元素就是不会有外边距，但也有例外的情况，因为浏览器会为一些 HTML 元素设置默认的外边距，例如 元素。您可以使用下面的属性来为 HTML 元素设置外边距： margin-top：设置元素上方的外边距；
-
CSS margin(外边距)属性定义元素周围的空间。 margin margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。 margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。 Margin可以使用负值，重叠的内容。 Margin - 单边外边距属性 在CSS中，它可以指定不同的侧面不同的边距：margin-top:100px; marg
-
你好，我正在尝试使用flex均匀地分配额外的可用宽度的div框之间的图像之间的边距。我试过使用弹性基础：30%；然而，它不是均匀地分配图像的边距，而是将图像垂直地堆叠在彼此的顶部。 null null