问答详情
源自:7-1 编程挑战

为什么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但也是无济于事!这是怎么回事啊?

提问者:White_Mink 2017-03-12 12:00

个回答

  • qq_九天揽月
    2017-03-13 11:57:06
    已采纳

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

  • qq_九天揽月
    2017-03-15 22:44:27

    方法一说错了,应该是

    把a定义为display:block;

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