老师,请问为什么我的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">慕课高铁客户服务中心 | </span><span class="nspan2">客户服务</span></li>
<li>意见反馈<span class="nspan3">imooc@.com</span></li>
<li>您好,请<span class="nspan4">登录</span>|注册</li>
<li>我的IMOOC▼</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>
正在回答
同学你好,是因为同学给手机的图片添加了padding-top值:
将内容撑了下来,导致mfont在网页右边。同学可以给父元素添加溢出隐藏:
如果我的回答帮助到了你,欢迎采纳,祝学习愉快~
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星