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

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.

< ul id="products">
{maccms:vodpagelist num=20 type=current by=time order=desc}

< img src="[pagelist:pic]" onerror="this.src='{maccms:path}ztimages/nopic.gif'" width="121" height="158" alt="[pagelist:name len=8 ]">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>

Copy after login

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

人气:[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; 测试}

Copy after login

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

Copy after login

firefox 20.0 IE 8.0 均得到以下效果

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

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

source：php.cn

Previous article：Let’s take a look at why this page navigation is not displayed properly under IE_html/css_WEB-ITnose Next article：After the dialog pops up, the parent page screen becomes incorrect_html/css_WEB-ITnose

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

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

Reply to discussion (solution)