我的css代码如下，为什么读出来的图片每一行只有1个，能不能每行三个，第四个换行_html/css

我的css代码如下，为什么读出来的图片每一行只有1个，第二个就会换行到下一行，请问怎么修改才能每行三个，第四个换行。

另外margin:10px auto是设置和表格上端的距离是10px，请问怎样才能设置与表格左边的距离也是10px。

这样显示的距离离左边还有有一段距离的。

人气:[pagelist:hits]

{/maccms:vodpagelist}

回复讨论(解决方案)

<style type="text/css"> <!-- * { margin:0; padding:0; font-size:12px; text-decoration:none; } #products { width:500px; margin:10px auto; } #products li { width:20px; height:24px; float:left; margin-left:5px; 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>

Nach dem Login kopieren

另外margin:10px auto是设置和表格上端的距离是10px，请问怎样才能设置与表格左边的距离也是10px。

margin-top : 10px;
margin-left:10px;

li float 每行显示的数目与窗口宽度有关，如果向控制每行显示数目，是不是只能用Table？

我这有500个宽度，足够显示三列了。这些代码都是放在一个表格内。

多谢，距离左边10px已经实现，只是图片每一行只有1个，第二个就会换行到下一行。应该如何调整代码呢？

我这有500个宽度，足够显示三列了。这些代码都是放在一个表格内。

看看你的表格TD 的宽度
不过我从代码里面没有见到TABLE元素

人气:[pagelist:hits]

首页

尾页

这是标签的内容的。

#products li {
width:20px;
height:24px;
float:left;
margin-left:5px;
display:inline; ----- 改为 inline-block试下
}
#products li a {
display:block; ----- 注释此行看下
}

改了还是显示一行一个图片呢

STYLE代码做了小修改

#products li { //width:20px; //height:24px; float:left; margin-left:5px; display:inline; //border:solid 1px blue; 测试}

Nach dem Login kopieren

         <table border="1" width="99%" id="table100"><tr>           <td width="547"  bordercolor="#65AD1A" height="10" style="line-height: 150%"><ul><ul id="products">  <li><a href="#"> <img  src="141044911.gif"     style="max-width:90%"  style="max-width:90%" alt="我的css代码如下，为什么读出来的图片每一行只有1个，能不能每行三个，第四个换行_html/css_WEB-ITnose" ></a> 	<span><a href="#">人气:</a></span>  </li>  <li><a href="#"><img  src="141044911.gif"     style="max-width:90%"  style="max-width:90%" alt="我的css代码如下，为什么读出来的图片每一行只有1个，能不能每行三个，第四个换行_html/css_WEB-ITnose" ></a> 	<span><a href="#">人气:</a></span>  </li>  <li><a href="#"><img  src="141044911.gif"     style="max-width:90%"  style="max-width:90%" alt="我的css代码如下，为什么读出来的图片每一行只有1个，能不能每行三个，第四个换行_html/css_WEB-ITnose" ></a> 	<span><a href="#">人气:</a></span>  </li>  <li><a href="#"><img  src="141044911.gif"     style="max-width:90%"  style="max-width:90%" alt="我的css代码如下，为什么读出来的图片每一行只有1个，能不能每行三个，第四个换行_html/css_WEB-ITnose" ></a> 	<span><a href="#">人气:</a></span>  </li>  </ul>  <br></td>              </tr> <tr>                <td width="547"  bordercolor="#65AD1A" height="10" style="line-height: 150%"></td>              </tr> </td></tr></table>

Nach dem Login kopieren

firefox 20.0 IE 8.0 均得到以下效果

呵呵呵，同样的代码，得到的就是两种截然不同结果。难道和我从数据库中读取的数据有关，

把你生成的html另存为htm，修改调试，再返回去看程序输出的内容有什么问题

Verwandte Etiketten：

我的css代码如下，为什么读出来的图片每一行只有1个，能不能每行三个，第四个换行

Quelle：php.cn

Vorheriger Artikel：大家看一下这个页面导航为什么在ie下显示不正常_html/css_WEB-ITnose Nächster Artikel：弹出dialog后，父页面画面变不正确_html/css_WEB-ITnose

Erklärung dieser Website

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

Neueste Artikel des Autors