<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS 圖片列表,橫向</title> <style type="text/css"> <!-- * { margin:0; padding:0; font-size:12px; text-decoration:none; } #products { width:560px; margin:50px auto; } #products li { width:110px; height:154px; float:left; margin-left:30px; display:inline; } #products li a { display:block; } #products li a img { border:1px solid #666; padding:1px; } #products li span a { width:110px; height:30px; line-height:24px; text-align:center; white-space:nowrap; text-overflow:ellipsis; overflow: hidden; } --> </style> </head> <body> <ul id="products"> <li><img src="/d/file/itjie/<a href=/itjie/Javajishu/ target=_blank class=infotextkey>Java</a>Scriptjishu/2014-10-23/3ef533202f83ac3d79ba4a0fa416b734.jpg" alt="" width="100" height="75"/> <span>VB定時關機源碼示例</span> </li> <li><img src="/d/file/itjie/<a href=/itjie/Javajishu/ target=_blank class=infotextkey>Java</a>Scriptjishu/2014-10-23/eb055dd0a42dd6177aac8f7ab487ca86.jpg" alt="" width="100" height="75"/><span>一個好用的C++日志生成類</span> </li> <li><img src="/d/file/itjie/<a href=/itjie/Javajishu/ target=_blank class=infotextkey>Java</a>Scriptjishu/2014-10-23/b3d39c7e150d2c98b0cd5545feba7633.jpg" alt="" width="100" height="75"/> <span>JS+CSS聯合打造圖文結合動感菜單</span> </li> </ul> </body> </html> [Ctrl+A 全選 注:如需引入外部Js需刷新才能執行] JavaScript技術:CSS 圖片橫向排列實現代碼,轉載需保留來源! 鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。