如何控制css让三个标签横排显示或者三个以上的标签横排，其实都是一样的，下面演示一下，通过控制li标签实现横排显示；
1、打开所需测试的软件，创建一个新的html
2、写入要实现效果的代码：
3、利用css来控制横排展示；
4、展示的效果为：
详解css：主要是控制li标签的靠左浮动：float:left；当然，展示在一排，靠右浮动也是可以的，list-style-type:none意思是：去除图2展示的前面的点；至于margi-right:20px；让li标签与右侧外边距离为20px
可以使用弹性布局，display: flex 就可以让div横排，默认布局轴方向就是横向，justify-content: space-between可以是div平均分布在水平轴上。随着智能手机的增多，手机网站也可以做的更加个性化，最近在改版自己的手机网站这其中，遇到了网站图片尺寸问题，手机屏幕都比较小，怎么让上传的规则不一的图片在手机上显示的更加美观呢？
那就利用css的强大功能吧。
先附上代码：
img
{
max-width:500px
myimg:expression(onload=function(){
this.style.width=(this.offsetWidth
>
500)?”500px”:”auto”}
)
}
解析下其中的几个数字吧。
这里规定了最大尺寸是宽500px，超过500px
则自动等比例缩小到500px
上面这段代码可能在某些浏览器下效果不好，比如存在高度不自动缩放等问题
那么可以试试下面的代码
我们再附上一段代码，对全局都是有效，如果是针对正文内容，在img前加个限制
比如我下面写的，否则可能导致logo等图片变形
.context
img{
max-width:500px
//IE7、FF等其他非IE浏览器下最大宽度为500px
width:500px
//所有浏览器中图片的大小为500px
width:expression(document.body.clientWidth>300?”300px”:”auto”)
//当图片大小大于500px，自动缩小为500px
overflow:hidden
}
