不在Horizo​​ntal CheckBoxList中包装ListItem文本

Question

我有动态CheckBoxList：

  <%@ Control Language="C#" AutoEventWireup="true" CodeFile="ProjectOrigin.ascx.cs" Inherits="UserControl_PEM_ASPX_ProjectOrigin" %>
<div style="display:block;">
<asp:CheckBoxList ID="CheckBoxList1" runat="server" RepeatDirection="Horizontal"  >
</asp:CheckBoxList></div>

并在我的函数中添加ListItem

private void ChkListBoxInit()
    {
        if (CheckBoxList1.Items.Count != 0) return;
        CheckBoxList1.Items.Clear();

        DesProvider p = new DesProvider();
        List<tblDes> list = p.GetByDesGrpId(grpid).OrderBy(a => a.DesId).ToList();
        ListItem li;
        foreach (var l in list)
        {
            li = new ListItem(l.DesF, l.val);
        CheckBoxList1.RepeatLayout = RepeatLayout.Flow;
            CheckBoxList1.Items.Add(li);
        }
     }

由此产生的Html是：

<div style="display:block;"> 
  <span id="ctl00_MainContent_FormView1_ProjectOrigin1_CheckBoxList1">
    <input id="ctl00_MainContent_FormView1_ProjectOrigin1_CheckBoxList1_0" type="checkbox" name="ctl00$MainContent$FormView1$ProjectOrigin1$CheckBoxList1$0" />
    <label for="ctl00_MainContent_FormView1_ProjectOrigin1_CheckBoxList1_0">بهبود فرآیند کار</label>

    <input id="ctl00_MainContent_FormView1_ProjectOrigin1_CheckBoxList1_1" type="checkbox" name="ctl00$MainContent$FormView1$ProjectOrigin1$CheckBoxList1$1" />
    <label for="ctl00_MainContent_FormView1_ProjectOrigin1_CheckBoxList1_1">بهبود محیط کار</label>

    <input id="ctl00_MainContent_FormView1_ProjectOrigin1_CheckBoxList1_2" type="checkbox" name="ctl00$MainContent$FormView1$ProjectOrigin1$CheckBoxList1$2" />
    <label for="ctl00_MainContent_FormView1_ProjectOrigin1_CheckBoxList1_2">ایمنی و بهداشت</label>

    <input id="ctl00_MainContent_FormView1_ProjectOrigin1_CheckBoxList1_3" type="checkbox" name="ctl00$MainContent$FormView1$ProjectOrigin1$CheckBoxList1$3" />
    <label for="ctl00_MainContent_FormView1_ProjectOrigin1_CheckBoxList1_3">رفاهی</label>

    <input id="ctl00_MainContent_FormView1_ProjectOrigin1_CheckBoxList1_4" type="checkbox" name="ctl00$MainContent$FormView1$ProjectOrigin1$CheckBoxList1$4" />
    <label for="ctl00_MainContent_FormView1_ProjectOrigin1_CheckBoxList1_4">فروش و مشتریان</label>

    <input id="ctl00_MainContent_FormView1_ProjectOrigin1_CheckBoxList1_5" type="checkbox" name="ctl00$MainContent$FormView1$ProjectOrigin1$CheckBoxList1$5" />
    <label for="ctl00_MainContent_FormView1_ProjectOrigin1_CheckBoxList1_5">کاهش هزینه ها</label>

    <input id="ctl00_MainContent_FormView1_ProjectOrigin1_CheckBoxList1_6" type="checkbox" name="ctl00$MainContent$FormView1$ProjectOrigin1$CheckBoxList1$6" />
    <label for="ctl00_MainContent_FormView1_ProjectOrigin1_CheckBoxList1_6">سایر موارد</label>
  </span>
</div>

如何避免在离线结束时使用ListItem文本换行并将复选框和此文本保持在一起？

Answer 1

确保<label>元素的css设置为display: block;。这应该确保标签文本都保持在同一行。

您可以在this jfiddle中看到这一点。标签具有display:inline;的示例显示您看到的相同包装。标签有display:block;的示例显示文本保持在同一行。

html发布后更新：

因为CheckBoxList与每个相关<input>分开生成<label>，所以我没有简单的方法可以让它们保持流畅，并保证标签不会包裹< em>和标签和复选框保留在同一行。您可以在css中设置label, input { float: right; display: block; }，但这样可以让标签位于与相关输入不同的行上。

我能看到的最佳解决方案是不使用CheckBoxList。相反，使用Repeater，类似于以下内容进行布局：

<asp:Repeater id="checkboxes" runat="server">
  <ItemTemplate>
    <div class="checkboxItem">
      <asp:CheckBox runat=server />
    </div>
  </ItemTemplate>
</asp:Repeater>

然后，您将以类似的方式对转发器进行数据绑定，在每个_ItemDataBound事件中填充CheckBox的值。

将每个CheckBox包含在<div>中并在您的css中添加label, .checkboxItem { float: left; }会强制复选框和标签保持在同一行，每the technique showed in this answer。