1行に3枚の画像を表示する問題と複数行で表示する問題をCSSで実装します。。 _html/css

1行に3枚の画像を表示する問題と複数行で表示する問題をCSSで実装します。。 _html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 09:41:18

オリジナル

3905 人が閲覧しました

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

ログイン後にコピー