css如何去掉导航空白 |css类名无效

.nav {
margin: 0;
padding: 0;
list-style: none;
}
.nav li {
display: inline-block;
margin-right: 10px;
}
.nav li:last-child {
margin-right: 0;
}
.nav a {
display: inline-block;
padding: 10px;
background-color: #333;
color: #fff;
text-decoration: none;
}

上述代码是一个基本的导航栏样式，但是可能会出现每个导航项之间的空白，导致网站显示效果不佳。下面针对这个问题提供以下几种解决方法：

1. 使用 CSS 的 float 属性

可以通过将导航项设置为浮动元素，来消除它们之间的空白。代码如下：

.nav li {
float: left;
margin-right: 10px;
}

2. 使用 CSS 的 margin 属性

可以通过将导航项之间的 margin 设置为负值，来消除它们之间的空白。代码如下：

.nav li {
display: inline-block;
margin-right: -4px;
}
.nav li:last-child {
margin-right: 0;
}

3. 使用 CSS 的 font-size 属性

可以通过将导航项元素内的字体大小设置为 0，来消除它们之间的空白。代码如下：

.nav {
font-size: 0;
}
.nav li {
display: inline-block;
margin-right: 10px;
font-size: 16px;
}

以上就是去除导航空白的三种方法，不同的方法适合不同的场景，可以根据具体情况选择最适合自己的方法。