老师麻烦帮忙看下 谢谢
来源：1-1 课程简介
慕莱坞4298532
2019-01-03 17:23:06
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>练习</title>
<style type="text/css">
ul{
list-style:none;
}
.complaininfo{
text-align: left;
padding-top: 30px;
font-size: 14px;
}
.complaininfo li{
margin-bottom:20px;
}
.complaininfo li span{
display: inline-block;
}
.complaininfo li span:nth-child(1){
width:85px;
text-align: right;
margin-right:30px;
}
.complaininfo li:nth-child(5){
display: inline-flex;
}
.complaininfo li:nth-child(5) span{
height:38px;
}
.complaininfo li:nth-child(5) .hr{
width:300px;
}
.complaininfo li .complainImg{
display: inline-flex;
flex-wrap: wrap;
margin-left:30px;
}
.complaininfo li .complainImg span{
width:135px !important;
height:90px;
background-color:#D8D8D8;
border:1px solid #979797;
margin-right:10px;
margin-top:10px;
}
</style>
</head>
<body>
<ul class="complaininfo">
<li>
<span>举报课程</span>
<span>A12345566X1</span>
</li>
<li>
<span>教练ID</span>
<span>13000001234</span>
</li>
<li>
<span>举报人ID</span>
<span>13011220001</span>
</li>
<li>
<span>举报原因</span>
<span>内容不健康</span>
</li>
<li>
<span>举报内容</span>
<span class="hr">占位占位占位占位占位占位占位占位占位位占位占位占位占位占位位占位占位占</span>
</li>
<li>
<span>上传图片</span>
<p class="complainImg">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</p>
</li>
</ul>
</body>
</html>
老师这是我想要实现的样式，已经基本实现了，但是红框中的部分，好像没有响应式布局，我试了好久都不行，麻烦您帮忙看下呢
1回答
-
同学你好，如果想要文字所占区域实现响应式，就需要设置宽度为百分比而不是固定像素px。
例如：
自己完善测试下，祝学习愉快！
0
相似问题