CSS样式的简单使用
在做项目时,有时做用到一行分几列显示内容,用datalist绑定,可以实现。但有时因我们不是设计师,有的代码不利于我们在itemtemplate中绑定内容.用ul +li 再加上CSS控制,就可以实现一行多列的情景,但这时不能在datalist的 itemtemplate中绑定 li,因为datalist生成的客户端代码是以table进行排版的,不是按html格式排版的,有人知道了,对了,用repeater控件.repeater控件是原样输出在itemtemplate的html标记的,如下:
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<li>
<img height="46" src="<%#Eval("imgUrl") %>" width="82">
</li>
</li>
</ItemTemplate>
</asp:Repeater>
后台绑定代码略了,我想信大家都已经早会用了,不用再重复了。当然这样生成出来的,还不能实现一行多列的效果,还得加CSS样式表,如下(添加到<head></head>中):
<style type="text/css">
ul
{
width:180px;
}
li{
width:90px;
float:left;
}
</style>
ul的宽度是控制一行显示几个li,如上例ul 的宽度为180px, li宽度为90px,同时要把li的float设置为left,这样,一行就显示两行了。
最后,将用例代码放上:
/Files/kevinlzf/css.rar