私のCSSコードは次のとおりです。なぜ読み取られた画像は1行に1つしかないのですか?1行に3つあり、4番目はnewline_html/css_WEB-ITnoseです。

私のCSSコードは次のとおりです。なぜ読み取られた画像には1行に1つの画像しかなく、2番目の画像は次の行に折り返されます。1行に3つの画像があり、4番目の画像が折り返されるようにするにはどうすればよいですか? 。

さらに、margin:10px auto はテーブルの上部からの距離を 10px に設定します。テーブルの左側からの距離も 10px に設定するにはどうすればよいですか。

このように表示された距離はまだ左から少し離れています。
ef1cac8df639bc9110cb13b8b5ab3dd7
de97929a5433acbf2cb569889e02ee0f
34934661d7147ca926b095899343bad0
da87196758d5fac81120193c38660967
{maccms:vodpagelist num=20 type=current by=time order=desc}
25edfb22a4f469ecb59f1190150159c6caeae81201c1ebdb4012ab8857124ff0
3948656d548f6edcf48a6884ef40ee305db79b134e9f6b82c0b36e0489ee08ed45a2772a6b6107b401db3c9b82c049c2ee7959cc8dd4be16ef633321c03dac32人気度:[pagelist:hits]5db79b134e9f6b82c0b36e0489ee08ed54bdf357c58b8a65c66d7c19c8e4d114
< ; /li>
929d1f5ca49e04fdcb27f9465b944689
{/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 各行に表示される数値を制御したい場合は、テーブル？

幅は 500 で、3 つの列を表示するには十分です。これらのコードはテーブルに配置されます。

ありがとうございます。左から 10px は達成されましたが、各行に画像は 1 つだけあり、2 番目の画像は次の行に折り返されます。コードをどのように調整すればよいでしょうか?

幅は 500 で、3 つの列を表示するには十分です。これらのコードはテーブルに配置されます。

テーブル TD の幅を見てください
しかし、コードに TABLE 要素が見つかりません

            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，修改调试，再返回去看程序输出的内容有什么问题