Css 默认用户代理样式表未覆盖

我正在创建一个自定义菜单（但也使用引导作为前端引擎），无法覆盖默认的用户代理样式表（目前正在chrome上测试）。 假设我有一个菜单的

div

，我想插入菜单项（所有菜单项的宽度相等）。问题是存在默认的填充/边距，我无法将它们放在同一行中

在我的示例中，我有一个

div

和四个菜单项（每个菜单项应为CSS中的25%）。 以下是JSFIDLE：

这是我的密码：

HTML:

---

您面临的是空白问题，而不是您认为的填充/边距问题。您可以向容器中添加

display:flex

，以解决问题

@导入url（“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
/*自定义css*/
ul，
ol{
保证金：0；
填充：0；
列表样式：无；
}
* {
保证金：0；
填充：0；
}
.大菜单{
边缘顶部：32px；
位置：相对位置；
z指数：100；
背景颜色：黄色；
边框：1px纯黑；
}
.mega菜单>ul{
文本对齐：居中；
显示器：flex；
}
.mega menu>ul>li{
显示：内联块；
字体大小：13px；
线高：15px；
垂直对齐：顶部；
宽度：25%；
}
.考试班{
背景色：红色；
边框：1px纯蓝色；
}

1
1
1
1

您面临的是空白问题，而不是您认为的填充/空白问题。您可以向容器中添加

display:flex

，以解决问题

@导入url（“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
/*自定义css*/
ul，
ol{
保证金：0；
填充：0；
列表样式：无；
}
* {
保证金：0；
填充：0；
}
.大菜单{
边缘顶部：32px；
位置：相对位置；
z指数：100；
背景颜色：黄色；
边框：1px纯黑；
}
.mega菜单>ul{
文本对齐：居中；
显示器：flex；
}
.mega menu>ul>li{
显示：内联块；
字体大小：13px；
线高：15px；
垂直对齐：顶部；
宽度：25%；
}
.考试班{
背景色：红色；
边框：1px纯蓝色；
}

1
1
1
1

设置浮动：左

.mega-menu>ul>li {
display: inline-block;
font-size: 13px;
line-height: 15px;
vertical-align: top;
width: 25%;
float:left;
}

设置浮动：左

.mega-menu>ul>li {
display: inline-block;
font-size: 13px;
line-height: 15px;
vertical-align: top;
width: 25%;
float:left;
}

---

您的问题是

内联块

元素之间的空白。已知这些会破坏预期的对齐。因此，为了解决这个问题，您可以对HTML进行一些更改，或者应用

font size:0到父级（如果需要，使用子级的值还原）。您可以查看更多信息

不过，更简单的解决方案是在
ul
上使用
display:flex
。如果父对象是flexbox，则其子对象将在一行（或一列，如果将其设置为）中对齐，没有任何空格，只有自定义添加的边距


@导入url（“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
/*自定义css*/
ul，ol{
保证金：0；
填充：0；
列表样式：无；
}
* {
保证金：0；
填充：0；
}
.大菜单{
边缘顶部：32px；
位置：相对位置；
z指数：100；
背景颜色：黄色；
边框：1px纯黑；
}
.mega菜单>ul{
文本对齐：居中；
显示器：flex；
}
.mega menu>ul>li{
显示：内联块；
字体大小：13px；
线高：15px；
垂直对齐：顶部；
宽度：25%；
}
.考试班{
背景色：红色；
边框：1px纯蓝色；
}


1
1
1
1

您的问题是
内联块
元素之间的空白。已知这些会破坏预期的对齐。因此，为了解决这个问题，您可以对HTML进行一些更改，或者应用
font size:0到父级（如果需要，使用子级的值还原）。您可以查看更多信息

不过，更简单的解决方案是在
ul
上使用
display:flex
。如果父对象是flexbox，则其子对象将在一行（或一列，如果将其设置为）中对齐，没有任何空格，只有自定义添加的边距


@导入url（“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
/*自定义css*/
ul，ol{
保证金：0；
填充：0；
列表样式：无；
}
* {
保证金：0；
填充：0；
}
.大菜单{
边缘顶部：32px；
位置：相对位置；
z指数：100；
背景颜色：黄色；
边框：1px纯黑；
}
.mega菜单>ul{
文本对齐：居中；
显示器：flex；
}
.mega menu>ul>li{
显示：内联块；
字体大小：13px；
线高：15px；
垂直对齐：顶部；
宽度：25%；
}
.考试班{
背景色：红色；
边框：1px纯蓝色；
}


1
1
1
1

如果使用引导，请尝试将
float:left
添加到
.mega menu>ul>li
中，然后使用class=row和class=col大小值。使用框架已经提供的内容。为便于将来参考，请记住用户代理样式的权重最低，分别排在用户样式和作者样式之后。优先顺序是作者样式表优先于用户样式表或用户代理样式表。因此，您应该始终能够过度限定用户代理样式。请参阅：如果使用引导，请尝试将
float:left
添加到
.mega menu>ul>li
中，然后使用class=row和class=col大小值。使用框架已经提供的内容。为便于将来参考，请记住用户ag
.mega-menu>ul>li {
display: inline-block;
font-size: 13px;
line-height: 15px;
vertical-align: top;
width: 25%;
float:left;
}