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

回复讨论(解决方案)

집

웹 프론트엔드

HTML 튜토리얼

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:22 PM

我的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>

로그인 후 복사

另外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; 测试}

로그인 후 복사

         <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="/static/imghw/default1.png"  data-src="141044911.gif"  class="lazy"       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="/static/imghw/default1.png"  data-src="141044911.gif"  class="lazy"       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="/static/imghw/default1.png"  data-src="141044911.gif"  class="lazy"       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="/static/imghw/default1.png"  data-src="141044911.gif"  class="lazy"       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>

로그인 후 복사

firefox 20.0 IE 8.0 均得到以下效果

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

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

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.