老师,请问为什么我的mfont写出来就在网页右边呀?调整不了左右了

老师,请问为什么我的mfont写出来就在网页右边呀?调整不了左右了

<!DOCTYPE html>

<html>

<meta charset="UTF-8">

<title></title>

<head>

<style>

*{

padding:0px;

margin:0px; 

}

/*nav样式*/

nav{

background-color:#efefef;

height:80px;

width:100%;

}

.nul li{

float:left;

list-style: none;

line-height: 80px;

font-size:14px;

}

.nimg1{

height:70px;

padding-top: 5px;

margin-left: 200px;

}

.nimg2{

height:22px;

padding-top:28px; 

}

.nspan1{

font-size: 18px;

font-weight: bold;

}

.nspan2{

font-size: 12px;

color: grey;

}

.nspan3,.nspan4{

color:rgb(251,116,3);

}

    .nul li:nth-child(3){

     margin-left: 40px;

    }

    .nul li:nth-child(4),li:nth-child(5){

     margin-left: 10px;

    }

    .nul li:nth-child(6){

     margin-left: 30px;

    }

    .nul2{

     display: none;

    }

    .nul li:nth-child(5):hover .nul2{

     display:block; 

    }

    .line-top{

     height:2px;

     width: 100%;

     background-color:rgb(36,135,201);

    }

    /*main部分*/

    .mfont{

     font-size:14px;

     margin-left: 20px;

    }

</style>

</head>

<body>

<nav>

    <ul class="nul">

     <li><img class="nimg1" src="素材/logo.png"></li>

     <li><span class="nspan1">慕课高铁客户服务中心&nbsp;|&nbsp;</span><span class="nspan2">客户服务</span></li>

     <li>意见反馈<span class="nspan3">imooc@.com</span></li>

     <li>您好,请<span class="nspan4">登录</span>|注册</li>

     <li>我的IMOOC&#9660;</li>

     <li><img class="nimg2" src="素材/手机.png"></li>

     <li>手机版</li>

    </ul>

    <ul class="nul2">

     <li>未完成的订单</li>

     <li>已完成的订单</li>

    </ul>

</nav>

<main>

        <div class="line-top"></div>

        <div class="mfont">您现在的位置:<span class="mspan1">客运首页>注册</span></div>

</main>

<footer></footer>

</body>

</html>


正在回答

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

2回答

同学你好,是因为同学给手机的图片添加了padding-top值:

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

将内容撑了下来,导致mfont在网页右边。同学可以给父元素添加溢出隐藏:

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

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

好帮手慕粉 2020-01-07 09:55:00

同学你好,老师这边测试的是在网页左边的:

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

而且是能调整位置的:

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

建议同学再测试下自己的代码呢。

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

  • 提问者 慕粉8021849 #1
    不是吧 我换了几个浏览器都在右边,老师,这个是什么原因啊。。
    2020-01-07 20:49:02
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上,带你深入理解企业开发核心思想,完成一个企业级网页的开发,体验前端工程师的成就感。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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