suchen

Heim >Web-Frontend >HTML-Tutorial >css实现一行显示三张图片且多行显示 问题。。_html/css_WEB-ITnose

css实现一行显示三张图片且多行显示 问题。。_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-21 09:41:183947Durchsuche

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

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：ie6和7里的input_html/css_WEB-ITnoseNächster Artikel：如何更改input file 的按钮？_html/css_WEB-ITnose

In Verbindung stehende Artikel

Mehr sehen