My css code is as follows. Why does the read image only have one per line? Can there be three per line and the fourth line is wrapped_html/css_WEB-ITnose

My css code is as follows. Why does the read image only have one image per line, and the second one will wrap to the next line? How can I modify it so that there are three per line, and the fourth one will wrap.

In addition, margin:10px auto sets the distance from the top of the table to 10px. How can I set the distance from the left side of the table to 10px as well.

The distance displayed in this way is still some distance from the left.

{maccms:vodpagelist num=20 type=current by=time order=desc}

Popularity:[pagelist:hits]

{/maccms:vodpagelist}

Reply to discussion (solution)

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

In addition margin:10px auto The distance from the top of the table is set to 10px. How can I set the distance from the left side of the table to 10px as well.

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

li float The number displayed in each line is related to the width of the window. If you want to control the number displayed in each line, is it just Can I use Table?

I have a width of 500, which is enough to display three columns. These codes are placed in a table.

Thank you, 10px from the left has been implemented, but there is only one image in each line, and the second one will wrap to the next line. How should I adjust the code?

I have a width of 500, which is enough to display three columns. These codes are placed in a table.

Look at the width of your table TD
But I don’t see the TABLE element in the code

            

                
               

                
               

 {maccms:vodpagelist num=20 type=current by=time order=desc}


 
 
• 
   人气:[pagelist:hits] 
   
 
 
 
 {/maccms:vodpagelist} 

首页
上一页{maccms:pagenum len=8}下一页
尾页
{maccms:pagenow}/{maccms:pagecount}页 {maccms:pagesize}条/每页
{maccms:pageselect}

这是标签的内容的。

#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"    style="max-width:90%" style="line-height: 150%"><ul><ul id="products">  <li><a href="#"> <img  src="/static/imghwm/default1.png"  data-src="141044911.gif"  class="lazy"       style="max-width:90%"  style="max-width:90%" alt="My css code is as follows. Why does the read image only have one per line? Can there be three per line and the fourth line is wrapped_html/css_WEB-ITnose" ></a> 	<span><a href="#">人气:</a></span>  </li>  <li><a href="#"><img  src="/static/imghwm/default1.png"  data-src="141044911.gif"  class="lazy"       style="max-width:90%"  style="max-width:90%" alt="My css code is as follows. Why does the read image only have one per line? Can there be three per line and the fourth line is wrapped_html/css_WEB-ITnose" ></a> 	<span><a href="#">人气:</a></span>  </li>  <li><a href="#"><img  src="/static/imghwm/default1.png"  data-src="141044911.gif"  class="lazy"       style="max-width:90%"  style="max-width:90%" alt="My css code is as follows. Why does the read image only have one per line? Can there be three per line and the fourth line is wrapped_html/css_WEB-ITnose" ></a> 	<span><a href="#">人气:</a></span>  </li>  <li><a href="#"><img  src="/static/imghwm/default1.png"  data-src="141044911.gif"  class="lazy"       style="max-width:90%"  style="max-width:90%" alt="My css code is as follows. Why does the read image only have one per line? Can there be three per line and the fourth line is wrapped_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，修改调试，再返回去看程序输出的内容有什么问题