极客观点
项目管理
HarmonyOS
1.我用百分比定义几个li的宽，将这几个li设置为display:inline-block后，显示出来第一个是左上角开始的，后面的li都上面空了一大块才显示。
2截图：
3.代码：
<style type="text/css">
body,div,p,ol,ul,li,a,input,img,nav,h2{
padding: 0;
margin: 0;
}
html,body{
width: 100%;
height: 100%;
}
#container{
width: 100%;
height: auto;
}
.con_1{
width: 100%;
height: 400px;
background-color: red;
position: relative;
}
.con_1>ul{
list-style: none;
width: 100%;
height: 100%;
background: green;
position: absolute;
top: 0;
left: 0;
/*left: -17%;*/
/*overflow: hidden;*/
}
.con_1>ul li{
width: 17%;
height: 100%;
display: inline-block;
background-color: firebrick;
}
.con_1 ul.div_1 li{
display: block;
}
</style>
<body>
<div id="container">
<div id="content">
<div class="con_1">
<!--con_1的内容-->
<ul>
<li class="con_1_1">
<div class="con_top">
<span>新闻资讯1</span>
<i class="more"></i>
</div>
<ul class="div_1">
<li>
<a href="#">写点什么好呢</a>
<sapn>2016-12-2</sapn>
</li>
<li>
<a href="#">写点什么好呢</a>
<sapn>2016-12-2</sapn>
</li>
<li>
<a href="#">写点什么好呢</a>
<sapn>2016-12-2</sapn>
</li>
<li>
<a href="#">写点什么好呢</a>
<sapn>2016-12-2</sapn>
</li>
</ul>
</li>
<li class="con_1_2">
<div class="con_top">
<span>卧龙介绍2</span>
</div>
<span>随便写点什么吧</span>
<span>随便写点什么吧</span>
</li>
<li class="con_1_3">
<div class="con_top">
<span>卧龙介绍3</span>
</div>
<span>随便写点什么吧</span>
<span>随便写点什么吧</span>
</li>
<li class="con_1_4">
<div class="con_top">
<span>卧龙介绍4</span>
</div>
<span>随便写点什么吧</span>
<span>随便写点什么吧</span>
</li>
<li class="con_1_5">
<div class="con_top">
<span>卧龙介绍5</span>
</div>
<span>随便写点什么吧</span>
<span>随便写点什么吧</span>
</li>
<li class="con_1_6">
<div class="con_top">
<span>卧龙介绍6</span>
</div>
<span>随便写点什么吧</span>
<span>随便写点什么吧</span>
</li>
</ul>
</div>
</div>
</div>
</body>
这里有个间隙的问题，详见：http://www.zhangxinxu.com/wor...
推荐使用flex布局，教程：http://www.ruanyifeng.com/blo...