设置asp.net中的复选框列表的显示样式的方法

 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>

效果如下图所示：