请问为什么导航条每一项不能靠右

请问为什么导航条每一项不能靠右

<html>

<head>

<meta charset="utf-8">

<title>宣传页项目</title>

<link rel="stylesheet" href="css/index.css" type="text/css">

<link rel="stylesheet" href="css/base.css" type="text/css">

</head>


<body>

<div class="box">

<header class="header">

<div class="header__logo">H5实战页面</div>

<nav class="header__nav">

<a href="" class="header__nav-item header__nav-item_status_active">实战课程</a>

<a href="" class="header__nav-item">商业案例</a>

<a href="" class="header__nav-item">课程体系</a>

<a href="" class="header__nav-item">集成环境</a>

<a href="" class="header__nav-item">云端学习</a>

<a href="" class="header__nav-item">即刻学习</a>

</nav>

</header>



</div>

</body>



.header{

width: 100%;

height: 60px;

position: relative;

margin: 0 auto;

overflow: hidden;

}

.header__logo{

width:40%;

height:40px;

text-indent: 50px;

line-height: 40px;

font-size: 18px;

background-color: black;

background: url(../img/logo.png) left center no-repeat;

position: absolute;

top: 50%;

margin-top: -20px;

left: 10px;

}

.header__nav{

width:60%;

height:40px;

position: absolute;

right: 0px;

top: 50%;

margin-top: -20px;

display: inline-block;

}

.header__nav-item{

font-size: 12px;

padding: 39px;

height:40px;

line-height:40px;

}


正在回答 回答被采纳积分+1

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

1回答
好帮手慕粉 2020-06-15 17:07:29

同学你好,因为同学给导航条整体设置了宽度占比,整体是靠右显示的:

http://img1.sycdn.imooc.com//climg/5ee73a08097100b819200220.jpg

可以不给其设置宽度,让其由内容撑开,这样就能让导航项靠右显示了:

http://img1.sycdn.imooc.com//climg/5ee73a4709363ded04910223.jpg

如果我的回答帮助了你,欢迎采纳。祝学习愉快~

问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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