设置asp.net中的复选框列表的显示样式的方法
2012-09-07 11:11
267 查看
Asp.net 中的 CheckBoxList 控件,没有设置项(ListItem)宽度的属性,无法通过简单设置属性的方式来改变项的宽度,CheckBoxList 控件显示的大小只会跟随文本内容的长度进行调整,当文本内容长度不一致时,CheckBoxList 控件呈现的界面会出现不规则的情况,显得很不美观。
aspx页面源码:
<asp:CheckBoxList ID="CheckBoxList1" Width="950" RepeatLayout="Table"RepeatColumns="3"
RepeatDirection="Horizontal" runat="server">
</asp:CheckBoxList>
RepeatLayout属性设置 项是否在某个表或流中重复。RepeatLayout="Table"是指以表格的形式呈现数据。
RepeatDirection属性设置 项的布局方向。RepeatDirection = "Horizontal"是指水平对置,RepeatDirection=“Vertical”垂直对齐。
IIS会把Asp.net中的Web控件解析为HTML元素,当查看aspx页面的源代码,发现 CheckBoxList控件到客户端浏览器生成的HTML源代码是Table元素,只要编写CSS样式,就可以解决项的宽度不一致问题。
html源码:
<table
id="CheckBoxList1" border="0" style="width:950px;">
<tr>
<td>
<input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1$0" /><labelfor="CheckBoxList1_0">复选框1</label>
</td>
<td>
<input id="CheckBoxList1_1" type="checkbox" name="CheckBoxList1$1" checked="checked" /><labelfor="CheckBoxList1_1">复选框2</label>
</td>
<td>
<input id="CheckBoxList1_2" type="checkbox" name="CheckBoxList1$2" checked="checked" /><label for="CheckBoxList1_2">复选框3</label>
</td>
</tr>
</table>
CSS样式:
<style type="text/css">
#CheckBoxList1{border-collapse:collapse; line-height:18px}
#CheckBoxList1 td{width:300px; border:1px solid #F0F8FF;padding-left:5px}
//#CheckBoxList1 是指Table的ID
//td 是指表格中的td元素
</style>
2. 如何设置复选框列表无滚动条且随着相关信息的增加列表的高度也增加,同样的内容信息减少,列表的高度也减少的方法:
#checkboxList1{scroll:auto;}
3. 使复选框列表显示水平和竖直方向的滚动条的方法:
可以在复选框列表外添加一个div然后设置div 的样式:
<div style="overflow:scroll; width:150px; height:80px;overflow-x:hidden;">
<asp:CheckBoxList ID="CheckBoxList1" runat="server" RepeatColumns="2" RepeatDirection="Horizontal" RepeatLayout="Table">
</asp:CheckBoxList>
</div>
效果如下图所示:
aspx页面源码:
<asp:CheckBoxList ID="CheckBoxList1" Width="950" RepeatLayout="Table"RepeatColumns="3"
RepeatDirection="Horizontal" runat="server">
</asp:CheckBoxList>
RepeatLayout属性设置 项是否在某个表或流中重复。RepeatLayout="Table"是指以表格的形式呈现数据。
RepeatDirection属性设置 项的布局方向。RepeatDirection = "Horizontal"是指水平对置,RepeatDirection=“Vertical”垂直对齐。
IIS会把Asp.net中的Web控件解析为HTML元素,当查看aspx页面的源代码,发现 CheckBoxList控件到客户端浏览器生成的HTML源代码是Table元素,只要编写CSS样式,就可以解决项的宽度不一致问题。
html源码:
<table
id="CheckBoxList1" border="0" style="width:950px;">
<tr>
<td>
<input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1$0" /><labelfor="CheckBoxList1_0">复选框1</label>
</td>
<td>
<input id="CheckBoxList1_1" type="checkbox" name="CheckBoxList1$1" checked="checked" /><labelfor="CheckBoxList1_1">复选框2</label>
</td>
<td>
<input id="CheckBoxList1_2" type="checkbox" name="CheckBoxList1$2" checked="checked" /><label for="CheckBoxList1_2">复选框3</label>
</td>
</tr>
</table>
CSS样式:
<style type="text/css">
#CheckBoxList1{border-collapse:collapse; line-height:18px}
#CheckBoxList1 td{width:300px; border:1px solid #F0F8FF;padding-left:5px}
//#CheckBoxList1 是指Table的ID
//td 是指表格中的td元素
</style>
2. 如何设置复选框列表无滚动条且随着相关信息的增加列表的高度也增加,同样的内容信息减少,列表的高度也减少的方法:
#checkboxList1{scroll:auto;}
3. 使复选框列表显示水平和竖直方向的滚动条的方法:
可以在复选框列表外添加一个div然后设置div 的样式:
<div style="overflow:scroll; width:150px; height:80px;overflow-x:hidden;">
<asp:CheckBoxList ID="CheckBoxList1" runat="server" RepeatColumns="2" RepeatDirection="Horizontal" RepeatLayout="Table">
</asp:CheckBoxList>
</div>
效果如下图所示:
相关文章推荐
- Win7的IIS配置asp.net出现“由于 Web 服务器上的“ISAPI 和 CGI 限制”列表设置,无法提供您请求的页面。”(图文解决方法)
- 【Asp.net入门5-05】设置Web窗体列表的样式
- ASP.NET中CheckBoxList复选框列表控件详细使用方法
- Win7的IIS配置asp.net出现“由于 Web 服务器上的“ISAPI 和 CGI 限制”列表设置,无法提供您请求的页面。”(图文解决方法)
- ASP.NET中CheckBoxList复选框列表控件详细使用方法
- 利用C#创建 IIS 站点并设置.NET Framework版本为ASP.NET 2.0 的方法(二)
- asp.net运行提示未将对象引用设置到对象的实例错误解决方法
- Asp.net设置默认按钮的方法总结
- ASP.NET MVC中为DropDownListFor设置选中项的方法
- asp.net:mv4 FileResult在IE8中下载不显示文件名和扩展名而显示Action方法名了!
- asp.net 伪静态 IIS设置后 直正HTML无法显示
- asp.net 连接sql server 2005 数据库的设置方法
- Asp.net日期字符串格式化显示方法
- ASP.NET对无序列表批量操作的三种方法
- ASP.NET页面中显示数据库记录集最快的方法
- ASP.Net全局变量的设置和读取方法
- asp.net 列表样式
- 新增格式化单元格数据功能-dotNetFlexGrid更新1.24版本,快速的设置您的表格数据的不同样式;现在开始扔掉你的Asp.net GridView吧。
- ASP.Net全局变量的设置和读取方法
- ue打开ini文档时显示函数列表的设置方法