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.

ef1cac8df639bc9110cb13b8b5ab3dd7
080b747a20f9163200dd0a7d304ba388
a47ba68f80e553bf0099a5a86d6ac362
531ac245ce3e4fe3d50054a55f265927

34934661d7147ca926b095899343bad0

0078287dbea86d909c69a9efe3704522
{maccms:vodpagelist num=20 type=current by=time order=desc}
25edfb22a4f469ecb59f1190150159c6ee7959cc8dd4be16ef633321c03dac32
5b076b4e4db8daeae21f4a0ef83e83685db79b134e9f6b82c0b36e0489ee08ed45a2772a6b6107b401db3c9b82c049c2ee7959cc8dd4be16ef633321c03dac32Popularity:[pagelist:hits]5db79b134e9f6b82c0b36e0489ee08ed54bdf357c58b8a65c66d7c19c8e4d114
bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
{/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

            8c486d6071d228f7f76668065c10474a
a34de1251f0d9fe1e645927f19a896e8
                ce2dd853d4b8291416d36f0566f0a900ff6d136ddc5fdfeffaf53ff6ee95f185
 {maccms:vodpagelist num=20 type=current by=time order=desc}

35d85cd8324a772ed73de1d14139dff6 
 25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812
 d9a899a195d2aa1256c27d034470af395db79b134e9f6b82c0b36e0489ee08ed45a2772a6b6107b401db3c9b82c049c2f1b3ba8846c179e65eb68da95b01a812人气:[pagelist:hits]5db79b134e9f6b82c0b36e0489ee08ed54bdf357c58b8a65c66d7c19c8e4d114 
 bed06894275b65c1ab86501b08a632eb 
 929d1f5ca49e04fdcb27f9465b944689 
 {/maccms:vodpagelist} 0c6dc11e160d3b678d68754cc175188a
d541a0651b3892e13b514ace5c3f6209首页5db79b134e9f6b82c0b36e0489ee08ed
0a02704268b96d6893915d25358bc828上一页5db79b134e9f6b82c0b36e0489ee08ed{maccms:pagenum len=8}20dfc3bf6a1091cf0d263139daab3720下一页5db79b134e9f6b82c0b36e0489ee08ed
85f2aefd635ae5a7a1b95c6ba275e656尾页5db79b134e9f6b82c0b36e0489ee08ed
{maccms:pagenow}/{maccms:pagecount}页 {maccms:pagesize}条/每页
{maccms:pageselect}
b90dd5946f0946207856a8a37f441edf
              fd273fcf5bcad3dfdad3c41bd81ad3e5 
a34de1251f0d9fe1e645927f19a896e8
                ce2dd853d4b8291416d36f0566f0a900
b90dd5946f0946207856a8a37f441edf
              fd273fcf5bcad3dfdad3c41bd81ad3e5 
b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
f16b1740fad44fb09bfe928bcc527e08

这是f5d188ed2c074f8b944552db028f98a1标签的内容的。

#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="141044911.gif"  width="121" height="158"></a> 	<span><a href="#">人气:</a></span>  </li>  <li><a href="#"><img src="141044911.gif"  width="121" height="158"></a> 	<span><a href="#">人气:</a></span>  </li>  <li><a href="#"><img src="141044911.gif"  width="121" height="158"></a> 	<span><a href="#">人气:</a></span>  </li>  <li><a href="#"><img src="141044911.gif"  width="121" height="158"></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，修改调试，再返回去看程序输出的内容有什么问题