css实现一行显示三张图片且多行显示问题。。

zwfwgood_csdn 2013-02-02 05:03:45

如图就想要一个这样的效果在手机上显示，我已经写了一些代码如下：



<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" /><a href="#"><span>河流信息</span></a>

 </li>

 <li>

 <img src="global/image/syd.jpg" /><a href=""><sapn>水源地</sapn></a>

 </li>

 <li>

 <img src="global/image/qsk.jpg" /><a href=""><sapn>地表水取水口</sapn></a>

 </li>

</ul>





<ul id="u2">

 <li>

 <img src="global/image/qsh.jpg" /><a href="wrBase/client!list.action"><sapn>取水用户</sapn></a>

 </li>

 <li>

<img src="global/image/pwk.jpg" /><a href=""><sapn>入河排污口</sapn></a>

</li>

<li>

<img src="global/image/qyscd.jpg" /><a href="wrMonitor/projectAmMonitor!list.action"><span>取用水测点信息</span></a>

</li>

</ul>

现在可以一行显示三张图片问题是怎么让第二行在第一行的下面显示，实现图片上的效果。。现在显示的都跑别的地方去了。。。求各位帮忙，在线等。。

...全文

2219 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

云水千寻 2013-02-03

打赏
举报

抱歉，上面有错误，试试下面这个：

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;}

云水千寻 2013-02-03

打赏
举报

试试这个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;}