为什么我的导航中间始终有空隙,怎么样才能去掉这个空隙

为什么我的导航中间始终有空隙,怎么样才能去掉这个空隙

<!DOCTYPE html>

<html>

<head>

<title>大作业</title>

<meta charset="utf-8">

<style type="text/css">

   *{

    margin: 0;

    padding: 0;

   }

.head{

width: 100%;

height: 80px;

background: #07cbc9;

position: fixed;

}

.head img{

padding-left: 80px;

float: left;

padding-top: 15px;

}

.head ul{

float: right;

padding-right: 80px;

}

.head ul li{

display: inline-block;

height: 80px;

color: #fff;

font-family: "Microsoft YaHei UI";

line-height: 80px;

cursor: pointer; 

list-style-type: none;

}

li:hover{ background-color: black;}

</style>

</head>

<body>

<div class="head">

<img src="images/logo.png">

<ul>

<li>HOME</li>

<li>ABOUT</li>

<li>GALLERY</li>

<li>FACULTY</li>

<li>EVENTS</li>

<li>CONTACT</li>

</ul>

</div>

<div class="banner"></div>

<div class="about"></div>

<div class="gallery"></div>

<div class="foot"></div>

</body>

</html>


正在回答

登陆购买课程后可参与讨论,去登陆

1回答

你好,这里因为li使用的是行内块display: inline-block;行内块本身之间会有一点空隙,若不想有的话,可以使用浮动float: left;

祝学习愉快~

  • 林鸢茵 提问者 #1
    非常感谢!
    2018-04-19 16:30:30
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师