.piclist{margin:0padding:0list-style-type:nonewidth:100%}
.piclist li{float:leftwidth:200pxheight:200px}
.piclist img{display:blockmargin:0 autowidth:150pxheight:150pxborder:1px solid #ccc}
.piclist p{text-align:center}
</style>
<ul class="piclist">
<li>
<img src="第一张" alt="" />
<p>第一张</p>
</li>
<li>
<img src="第二张" alt="" />
<p>第二张</p>
</li>
<li>
<img src="第三张" alt="" />
<p>第三张</p>
</li>
<li>
<img src="第四张" alt="" />
<p>第四张</p>
</li>
<li>
<img src="第五张" alt="" />
<p>第五张</p>
</li>
</ul>
不懂再问
如何控制css让三个标签横排显示或者三个以上的标签横排，其实都是一样的，下面演示一下，通过控制li标签实现横排显示；
1、打开所需测试的软件，创建一个新的html
2、写入要实现效果的代码：
3、利用css来控制横排展示；
4、展示的效果为：
详解css：主要是控制li标签的靠左浮动：float:left；当然，展示在一排，靠右浮动也是可以的，list-style-type:none意思是：去除图2展示的前面的点；至于margi-right:20px；让li标签与右侧外边距离为20px
HTML部分：
<div id="nav">
<ul>
<li>AAAA</li>
<li>BBBB</li>
<li>CCCC</li>
<li>DDDD</li>
<li>EEEE</li>
<li>FFFF</li>
</ul>
</div>
css部分：
#nav{
margin: 0 auto
border: 2px solid #00CED1
}
ul,li {
margin: 0px
padding: 0px
list-style: none
}
ul{
display: flex
flex-direction: row
flex-wrap: wrap
}
li{
border: 1px solid
width: 100px/*每个元素的初始化宽度*/
text-align: center
margin-top: 10px
margin-bottom: 10px
flex:auto /*这是关键*/
}
扩展资料：
Flex是Flexible Box的缩写，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
采用Flex布局的元素，被称为Flex容器(flex container)，简称“容器”。其所有子元素自动成为容器成员，成为Flex项目(Flex item)，简称“项目”。
容器默认存在两根主轴：水平方向主轴(main axis)和垂直方向交叉轴(cross axis)，默认项目按主轴排列。
main start/main end：主轴开始位置/结束位置；
cross start/cross end：交叉轴开始位置/结束位置；
main size/cross size：单个项目占据主轴/交叉轴的空间；
设置在容器上的属性有6种。
flex-direction
flex-wrap
flex-flow
justify-content
align-item
align-content
