极客观点
项目管理
HarmonyOS
我想要左右两边margin：2.5%间距；文字水平居中；把第4.5.6.元素排列到下一行；
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>标本馆</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<link rel="stylesheet" type="text/css" href="common.css">
<style type="text/css">
body{
margin: 0;
padding: 0;
}
a{
display: block;
text-decoration: none;
border: none;
list-style:none;
}
.w100{
max-width: 750px;
min-width:320px;
width:100%;
margin: 0 auto;
}
.footer{
width: 100%;
overflow: hidden;
background: #e8e7e7;
}
.left{
width: 95%;
float: left;
margin: 20px 2.5%;
color: #4c4b4b;
}
.col{
float: left;
margin: 0 2%;
font-size: 18px;
color: #4c4b4b;
font-weight: bold;
}
.col a{
font-size: 14px;
color: #4c4b4b;
font-weight: normal;
margin-top: 6px;
}
</style>
</head>
<body>
<div class="w100">
<div class="footer">
<div class="left">
<div class="col">标本馆
<a href="">中药标本馆</a>
<a href="">模拟药房</a>
</div>
<div class="col">中药标本
<a href="">浸制标本</a>
<a href="">普通蜡叶标准</a>
<a href="">精品蜡叶标准</a>
<a href="">原药材标本</a>
<a href="">贵重药材标本</a>
<a href="">真伪鉴别标本</a>
<a href="">植物切片</a>
<a href="">水晶标本</a>
</div>
<div class="col">互动多媒体
<a href="">VR技术</a>
<a href="">AR技术</a>
<a href="">虚拟现实技术</a>
<a href="">全息技术</a>
<a href="">幻影成像</a>
</div>
<div class="col">公司介绍
<a href="">公司简介</a>
<a href="">资质荣耀</a>
<a href="">公司实力</a>
<a href="">联系我们</a>
</div>
<div class="col">公司新闻
<a href="">公司新闻</a>
<a href="">行业新闻</a>
<a href="">媒体视点</a>
</div>
<div class="col">加入鼎信
<a href="">社会招聘</a>
<a href="">培训发展</a>
<a href="">员工关怀</a>
</div>
</div>
</div>
</div>
</body>
</html>
我现在的结果是这样的，用的chrome浏览器
我想要的效果：
我尝试过修改他们的宽度和高度；清除float再添加float；也给过4.5.5.一个新的类名；left的间距总比右边宽；没有达到我想要的效果；我之前没遇到过这种问题；需要在手机端展示出来，谢谢大家。
html5
建议用flex布局去做，可以了解下http://www.ruanyifeng.com/blo...