为了账号安全,请及时绑定邮箱和手机立即绑定

为什么li之间有间隙?

<div class="nav">

    <div class="logo"><img src="images/logo.jpg" /></div>

        <div class="nav_right">

        <ul>

            <li class="first"><a href="#">首页</a></li>

                <li><a href="#">产品特色</a></li>

                <li><a href="#">解决方案</a></li>

                <li><a href="#">产品价格</a></li>

                <li><a href="#">帮助中心</a></li>

                <li><a href="#">关于我们</a></li>

            </ul>

        </div>

    </div>

css样式如下

*{

margin:0;

padding:0;

}

.nav{

width:1000px;

height:80px;

margin:0 auto;

}

.logo{

float:left;


}

.nav_right{

width:720px;

float:left;

}

.nav_right li{

font-size:16px;

width:120px;

line-height:80px;

text-align:center;

list-style-type:none;

float:left;

}

.nav_right li a{

display:inline-block;

text-decoration:none;

}

.nav_right li a:link,.nav_right li a:visited{

color:#333;

}

.nav_right li a:hover,.nav_right li a:active{

padding:0 20px;

background-color:#C00;

}

.first{

background-color:#C00;

}

试着把ul跟li写在一起,li之间还是有差不多8px的距离。也试着把ul的font-size设置为0但也是无济于事!这是怎么回事啊?

正在回答

2 回答

没有间距,你把a标签定义为display:inline-block;没有完全继承li的宽,所以才会这样。解决方法,方法一:把li定义为display:block;方法二:把hover样式加在li上。

0 回复 有任何疑惑可以回复我~
#1

White_Mink 提问者

按照您说的做还是不行啊!还是有间距啊
2017-03-15 回复 有任何疑惑可以回复我~
#2

White_Mink 提问者

解决啦!我是试着改变li的宽度的!但是为什么会这样呢?有点不明白!谢谢你啦
2017-03-15 回复 有任何疑惑可以回复我~

方法一说错了,应该是

把a定义为display:block;

你去查一下display:inline-block;与display:block;的区别就明白了

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

为什么li之间有间隙?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信