我的css代码如下,为什么读出来的图片每一行只有1个,能不能每行三个,第四个换行_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 12:22:26
原创
2323人浏览过

我的css代码如下,为什么读出来的图片每一行只有1个,第二个就会换行到下一行,请问怎么修改才能每行三个,第四个换行。

另外margin:10px auto是设置和表格上端的距离是10px,请问怎样才能设置与表格左边的距离也是10px。

这样显示的距离离左边还有有一段距离的。


 



 
{/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 每行显示的数目与窗口宽度有关,如果向控制每行显示数目,是不是只能用Table?

我这有500个宽度,足够显示三列了。这些代码都是放在一个表格内。

多谢,距离左边10px已经实现,只是图片每一行只有1个,第二个就会换行到下一行。应该如何调整代码呢?

我这有500个宽度,足够显示三列了。这些代码都是放在一个表格内。

看看你的表格TD 的宽度
不过我从代码里面没有见到TABLE元素

            



                
               

                
               





这是标签的内容的。

#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="#"> @@##@@</a> 	<span><a href="#">人气:</a></span>  </li>  <li><a href="#">@@##@@</a> 	<span><a href="#">人气:</a></span>  </li>  <li><a href="#">@@##@@</a> 	<span><a href="#">人气:</a></span>  </li>  <li><a href="#">@@##@@</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,修改调试,再返回去看程序输出的内容有什么问题

我的css代码如下,为什么读出来的图片每一行只有1个,能不能每行三个,第四个换行_html/css_WEB-ITnose我的css代码如下,为什么读出来的图片每一行只有1个,能不能每行三个,第四个换行_html/css_WEB-ITnose我的css代码如下,为什么读出来的图片每一行只有1个,能不能每行三个,第四个换行_html/css_WEB-ITnose我的css代码如下,为什么读出来的图片每一行只有1个,能不能每行三个,第四个换行_html/css_WEB-ITnose我的css代码如下,为什么读出来的图片每一行只有1个,能不能每行三个,第四个换行_html/css_WEB-ITnose
HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号