这里已经定义过margin和padding为0，使用margin-left会多出来一部分宽度
<template>
<div>
<div class="status">
<div class="list">
<span class="font">全部</span><img src="../assets/arrow.png"><span class="icon">|</span>
</div>
<div class="list">
<span class="font">最新</span><img src="../assets/arrow.png"><span class="icon">|</span>
</div>
<div class="right">
<span class="right-font">仅显示未学</span><img src="../assets/buttom.png" class="one"><img src="../assets/slide.png" class="two">
</div>
</div>
</div>
</template>
<script>
export default{
data(){
return{}
},
mounted(){},
methods:{},
computed:{},
components:{}
}
</script>
<style scoped>
*{
margin: 0;
padding: 0;
}
.status{
width: 375px;/*no*/
height: 36px;/*no*/
line-height: 36px;/*no*/
border-top: solid #D3D3D3 1px;/*no*/
border-bottom: solid #D3D3D3 1px;/*no*/
box-shadow: 0 2px 1px 0 rgba(211,211,211,.3);/*no*/
}
.status div{
float: left;
font-size: 12px;/*no*/
color:#71777D;
position: relative;
}
.list{
width: 90px;/*no*/
}
.list .font{
left: 26px;/*no*/
margin-right: 4px;/*no*/
}
.list img{
width: 10px;/*no*/
height: 10px;/*no*/
}
.list .icon{
position: absolute;
right: 0;
}
.right {
width: 195px;/*no*/
}
.right .right-font{
left: 83px;/*no*/
}
.right .one{
width: 24px;/*no*/
height: 8px;/*no*/
position: absolute;
left: 151px;/*no*/
top: 14px;/*no*/
}
.right .two{
width: 12px;/*no*/
height: 12px;/*no*/
position: absolute;
left: 151px;/*no*/
top: 12px;/*no*/
}
</style>
使用position的absolute会好很多，很准确，不使用position的absolute，只使用margin-left的时候，
就会多出来一些距离达不到position的absolute的效果，这是为什么
正在回答
同学你好，使用同学提供的代码测试，设置margin-left:26px,没有换行，如下
同学清除缓存后再测试下，因为代码具有灵活性，实现效果的方式有很多种，能够实现效果就可以了。因为这是一个项目作业，代码比较多，同学可以先实现其他的效果，写完之后上传作业，在作业中新建一个word文档，把问题描述下，把同学使用margin实现的代码注释在作业里，批复作业的老师会给出指导。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
- 参与学习 人
- 提交作业 209 份
- 解答问题 3299 个
本路径是通过ES6基础知识、运用Zepto、Swiper、fullPag等移动端常用工具包、以及当下流行框架Vue，结合多个实战案例，还原真实开发场景，最终实现手机端购物商城网页开发。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星