CSS样式的简单使用
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
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· [AI/GPT/综述] AI Agent的设计模式综述