div+css
当前位置:长沙网站制作 > 建站知识 > div+css >
ul li横排显示图片
发布时间:2011-06-19 01:06   来源:长沙网站制作   点击:次   字体:    

div学的都不是很好,很多时候都是从实践中摸索。这个ul li横排我是排过无数次。每次排的都相当好。

自己网站的这个案例排的就不齐。float:left,是核心,用他来进行横排。里面一定不能有display:block,千万不能有这句。否则在IE8下面排的就不齐。是错乱的。用织梦代码做示例,以后再横排就要注意了。

<div id="plug1">
            <ul>
            {dede:list pagesize='18'}
                <li>
    [field:array runphp='yes']@me = (empty(@me['litpic']) ? "" : "<a target='_blank' href='{@me['arcurl']}' class='preview' title='{@me['title']}'><img src='{@me['litpic']}' width='150' height='150' alt='{@me['title']}' title='{@me['title']}' /></a>"); [/field:array]<br/>
    <span class="info_title">[field:title function="cn_substr(@me,25)" /]</span>
                <!--<span>完成时间:([field:pubdate function="MyDate('Y-m-d',@me)" /])</span>-->
    </li>
   {/dede:list}
   </ul

css:三行就可以搞定了

#plug1 ul{ margin-left: 60px; }
#plug1 ul li{ float: left; width: 210px; line-height: 45px; }
.info_title{ width: 150px; overflow: hidden;}


关键字:图片,显示,横排,li,ul,

顶一下
(2)
40%
踩一下
(3)
60%
网站对话
web chat