css实现一行显示三张图片且多行显示 问题。。_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-21 09:41:183949검색
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으로 문의하세요.