为什么nav设置右浮动会再header下面?

为什么nav设置右浮动会再header下面?

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>IMOOC</title>
<style type="text/css">
    header{
        width:100%;
        height:100x;
        background-color:black;
    }
    a{
        color:white;
        text-decoration:none;
    }
    span{
        color:white;
    }
    nav{
        float:right;
        display:inline;
    }
</style>
</head>
<body>
<header>
    <div>
        <a href="#1" alt="logo"><img src="http://img1.sycdn.imooc.com/climg//582e5f160001b17100400040.png"><span>MYMOOC</span></a>
        
    </div>
    <nav>
        <a href="#2" class="red">Home</a>
        <a href="#3" class="yellow">Course</a>
        <a href="#4" class="green">Actual</a>
        <a href="#5" class="purple">Plan</a>
        <a href="#6" class="orange">FAQ</a>
        <a href="#7" class="blue">Notes</a>
    </nav>
</header>
</body>
</html>


正在回答

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

1回答

同学你好,因为nav前面还有一个div,div是块元素,默认是自占一行的。如果想要两个块元素在同一行显示,需要同时设置浮动。

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

这里给前面的div设置浮动:

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

另外,如下单位书写不正确:

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

改成px:

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

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

  • localhost999 提问者 #1
    老师按照你的两个都给浮动,背景颜色黑色没了
    2020-07-10 17:38:45
  • localhost999 提问者 #2
    这是为什么呢?
    2020-07-10 17:39:13
  • localhost999 提问者 #3
    为什么header背景颜色没了呢
    2020-07-10 17:39:46
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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