<p class="sougouContent"> 私のCSSコードは次のとおりです。なぜ読み取られた画像には1行に1つの画像しかなく、2番目の画像は次の行に折り返されます。1行に3つの画像があり、4番目の画像が折り返されるようにするにはどうすればよいですか? 。 <br> <br> さらに、margin:10px auto はテーブルの上部からの距離を 10px に設定します。テーブルの左側からの距離も 10px に設定するにはどうすればよいですか。 <br> <br> このように表示された距離はまだ左から少し離れています。 <br> <HEAD> <br> <!-- <br /> * { <br /> フォントサイズ:12px;なし; <br /> } <br /> #products { <br /> width:500px; <br /> margin:10px; <br /> height:24px; :inline; <br /> } <br /> #products li a { <br /> display:block; <br /> #products li a img { <br /> border:1px <br /> padding:1px; <br /> width: 110px ; <br /> 高さ: 24px; <br /> テキスト-オーバーフロー: 省略記号; <br /> <スタイル> <br> </HEAD> <br> <ul id="製品"> <br> {maccms:vodpagelist num=20 type=current by=time order=desc} <br> <li><a href= " #"> <br> <img src="[pagelist:pic]" onerror="this.src='{maccms:path}ztimages/nopic.gif'" width="121" height="158" alt= " [pagelist:name len=8]"></a><span><a href="#">人気度:[pagelist:hits]</a></span> <br> < ; /li> <br> </ul> <br> {/maccms:vodpagelist} <br> <br> <br> ディスカッションへの返信 (解決策) <br> <br> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><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> </pre><div class="contentsignin">ログイン後にコピー</div></div> <br /> <br /> さらに、margin: 10px auto はテーブルの上部からの距離を設定します10px テーブルの左側からの距離も 10px に設定するにはどうすればよいですか? <br /> <br /> margin-top : 10px; <br /> margin-left:10px; <br /> <br /> li float 各行に表示される数値を制御したい場合は、テーブル？ <br /> <br /> 幅は 500 で、3 つの列を表示するには十分です。これらのコードはテーブルに配置されます。 <br /> <br /> ありがとうございます。左から 10px は達成されましたが、各行に画像は 1 つだけあり、2 番目の画像は次の行に折り返されます。コードをどのように調整すればよいでしょうか? <br /> <br /> 幅は 500 で、3 つの列を表示するには十分です。これらのコードはテーブルに配置されます。 <br /> <br /> テーブル TD の幅を見てください <br /> しかし、コードに TABLE 要素が見つかりません <br /> <p class="sougouAnswer"> <table border="0" width="99%" id="table100"> <br /> <tr> <br /> <td width="547" bordercolor="#65AD1A" height="10" style="line-height: 150%"><ul> <br /> {maccms:vodpagelist num=20 type=current by=time order=desc} <br /> <br /> <ul id="products"> <br /> <li><a href="#"> <br /> <img src="[pagelist:pic]" onerror="this.src='{maccms:path}ztimages/nopic.gif'" width="121" height="158" alt="[pagelist:name len=8]"></a><span><a href="#">人气:[pagelist:hits]</a></span> <br /> </li> <br /> </ul> <br /> {/maccms:vodpagelist} <br> <br /> <a class="pa" style="padding-left:5px" href="{maccms:pagefirst}">首页</a> <br /> <a href="{maccms:pagepre}">上一页</a>{maccms:pagenum len=8}<a href="{maccms:pagenext}">下一页</a> <br /> <a class="pa" style="padding-left:5px" href="{maccms:pagelast}">尾页</a> <br /> {maccms:pagenow}/{maccms:pagecount}页 {maccms:pagesize}条/每页 <br /> {maccms:pageselect} <br /> </td> <br /> </tr> <br /> <tr> <br /> <td width="547" bordercolor="#65AD1A" height="10" style="line-height: 150%"> <br /> </td> <br /> </tr> <br /> </td> <br /> </tr> <br /> </table> <br /> <br /> 这是<table>标签的内容的。 </p> <p class="sougouAnswer"> #products li { <br /> width:20px; <br /> height:24px; <br /> float:left; <br /> margin-left:5px; <br /> display:inline; ----- 改为 inline-block试下 <br /> } <br /> #products li a { <br /> display:block; ----- 注释此行看下 <br /> } </p> <p class="sougouAnswer"> 改了还是显示一行一个图片呢 <br /> <br /> </p> <p class="sougouAnswer"> STYLE代码做了小修改 <br /> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>#products li { //width:20px; //height:24px; float:left; margin-left:5px; display:inline; //border:solid 1px blue; 测试} </pre><div class="contentsignin">ログイン後にコピー</div></div> <br /> <br /> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> <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></pre><div class="contentsignin">ログイン後にコピー</div></div> <br> <br> firefox 20.0 IE 8.0 均得到以下效果 <br> </p> <p class="sougouAnswer"> 呵呵呵，同样的代码，得到的就是两种截然不同 结果。难道和我从数据库中读取的数据有关， <br> <br> <br> </p> <p class="sougouAnswer"> 把你生成的html另存为htm，修改调试，再返回去看程序输出的内容有什么问题 </p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
