css实现一行显示三张图片且多行显示 问题。。_html/css_WEB-ITnose
- WBOY原创
- 2016-06-21 09:41:183945浏览
css
如图就想要一个这样的效果在手机上显示， 我已经写了一些代码如下：
<style>ul{width:auto;}ul li { list-style: none; width:auto; height:auto; clear: none; float:left;display:inline }ul li a{ float: none; display:block;}ul li a span{display:block;}</style><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width; initial-scale=1.2; minimum-scale=1.0; maximum-scale=2.0"/><title>基础信息</title></head><body><div id="center"><ul id="u1"><li> <img src="global/image/hlx.jpg" / alt="css实现一行显示三张图片且多行显示 问题。。_html/css_WEB-ITnose" ><a href="#"><span>河流信息</span></a> </li> <li> <img src="global/image/syd.jpg" / alt="css实现一行显示三张图片且多行显示 问题。。_html/css_WEB-ITnose" ><a href=""><sapn>水源地</sapn></a> </li> <li> <img src="global/image/qsk.jpg" / alt="css实现一行显示三张图片且多行显示 问题。。_html/css_WEB-ITnose" ><a href=""><sapn>地表水取水口</sapn></a> </li></ul><ul id="u2"> <li> <img src="global/image/qsh.jpg" / alt="css实现一行显示三张图片且多行显示 问题。。_html/css_WEB-ITnose" ><a href="wrBase/client!list.action"><sapn>取水用户</sapn></a> </li> <li><img src="global/image/pwk.jpg" / alt="css实现一行显示三张图片且多行显示 问题。。_html/css_WEB-ITnose" ><a href=""><sapn>入河排污口</sapn></a></li><li><img src="global/image/qyscd.jpg" / alt="css实现一行显示三张图片且多行显示 问题。。_html/css_WEB-ITnose" ><a href="wrMonitor/projectAmMonitor!list.action"><span>取用水测点信息</span></a></li></ul> 现在可以一行显示三张图片问题是怎么让第二行在第一行的下面显示，实现图片上的效果。。现在显示的都跑别的地方去了。。。 求各位帮忙，在线等。。
回复讨论(解决方案)
最不科学的办法 table吧
试试这个CSS：
l{width:auto;}ul li { list-style: none; width:auto; height:auto; display:inline-block }ul li a{ float: none; display:block;}ul li a span{display:block;} 抱歉，上面有错误，试试下面这个：
ul{width:auto;}ul li { list-style: none; width:auto; height:auto; display:inline-block }ul li a{ float: none; display:block;}ul li a span{display:block;} 声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn