ホームページ > 記事 > ウェブフロントエンド > 1行に3枚の画像を表示する問題と複数行で表示する問題をCSSで実装します。 。 _html/css_WEB-ITnose
1行に3枚の画像を表示する問題と複数行で表示する問題をCSSで実装します。 。 _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:41:183906ブラウズ
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" /><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> これで、1行に3つの画像を表示できるようになります。 2 行目を最初の行の下に表示して、画像に効果を与えます。 。現在、展示されているものは別の場所に移動しました。 。 。助けてください。オンラインでお待ちください。 。
ディスカッションへの返信 (解決策)
テーブル化する最も非科学的な方法
この 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 までご連絡ください。